Embedding a .remix into a webpage

To embed a .remix into a webpage, simply use the rmx-remix web component (the prod version is hosted on remix.app, the dev version on dev.remix.app). If you have mre control over the web page and want better performance, use the full-screen stack.

Params

The webcomp takes the following params

url (string, required): the url of the .remix file
screen-name (string, optional): the screen to display (it uses the home screen of you app by default)
params (json string, optional): list of params to pass to the first screen
no-shadow (boolean, optional): pass this to avoid using the shadow dom

Examples

Embedding a single .remix

A simple example, simply passing the src url of the .remix

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <script src="<https://remix.app/js/rmx-remix.js>" type="module"></script>
    </head>

    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>

    <body>
        <!-- arvind: params + env inspector-->
        <rmx-remix
            src="<https://agt.files.remix.app/iaEj4QYboi/_rmx_files/apps/embed.remix>"
        ></rmx-remix>
    </body>
</html>

Embedding with params

Passing parameters to the .remix with the params attrib.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <script src="<https://remix.app/js/rmx-remix.js>" type="module"></script>
    </head>

    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>

    <body>
        <!-- arvind: params + env inspector-->
        <rmx-remix
            src="<https://agt.files.remix.app/iaEj4QYboi/_rmx_files/apps/embed.remix>"
        ></rmx-remix>
    </body>
</html>

Embedding multiple .remix

Multiple .remix can be embedded on the same page.