To embed a .remix into a webpage, you have multiple options:

  1. html: use the <rmx-remix> web component
  2. javascript: use es6 imports with ****the Remix Runtime Library.
  3. react: use the <RmxRemix> react component (TBD)

<rmx-remix> web component

Download:

Attributes

The webcomp takes the following attributes

Attribute Type Required Description
src string required Required. URL of the .remix file
screen-name string optional Screen to display, uses home screen by default if not provided
params json object string optional Parameters passed to the app
constants json object string optional Constants passed to the app
no-shadow boolean optional Disable Shadow DOM
token string optional Auth token
auth-server string optional Auth server URL
auth-workspace string optional Auth workspace identifier
db-key string optional A potential db key if you do not wish to use the default one (the src).
db-key-suffix string optional A unique suffix used in case you have multiple components referring to the same database
debug string optional A list of debug flags (for now only "mixcore" is supported)

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>"
            params='{"first":"john","last":"doe"}'
        ></rmx-remix>
    </body>
</html>