Embedding Repls

Embedding a Repl in your website or documentation allows you to display a read-only view of your code, meaning viewers can see but not edit the code. This feature is particularly useful for showcasing examples, tutorials, or code snippets directly within your content.

Running & Deploying

To interact with the Repl, such as running the code and seeing its output, users will need to fork it. Forking creates a personal copy of the Repl in their workspace, where they can run and edit the code. For a more integrated experience, you can deploy your Repl and use an iframe to embed the deployed application from replit.app directly into your site.

How to embed a Repl

To embed a public Repl, append the ?embed=true query parameter to the Repl's URL. This modification converts the URL into an embeddable link. Below is an example demonstrating how to embed a Repl using an iframe in HTML:

<iframe src="YOUR REPL LINK?embed=true" width="600" height="400"></iframe>

Note: Replace <YOUR REPL LINK> with the actual link to your Repl, for example, https://replit.com/@user/repl-name.

Here's an example of an embedded Repl:

Customizing the Theme

You can customize the appearance of the embedded Repl by setting the theme. Add theme=light or theme=dark at the end of the URL to choose between a light or dark theme. For instance, to embed a Repl with a light theme:

<iframe src="YOUR REPL LINK?embed=true&theme=light" width="600" height="400"></iframe>

Example with a light theme: