Embedding repls
In this guide, we'll show you how to embed a repl on another platform using an <iframe>
. We'll provide you with a set of query parameters you can use to render different previews of the same repl, and give you information on editing an embedded repl.
Repls support the oEmbed standard, so you can embed a repl on any platform that supports this standard by pasting your repl URL formatted as https://replit.com/@username/repl-name
, and a preview will be rendered.
Embedding a repl using <iframe>
You can embed a repl using <iframe>
with this code snippet:
<iframe frameborder="0" width="100%" height="500px" src="REPL_URL?QUERY_PARAMETERS"></iframe>
Replace REPL_URL
with the URL of the repl you want to embed. You can use QUERY_PARAMETERS
to specify how the repl will be rendered.
Replit supports two query parameters on custom <iframe>
tags: ?embed=true
and ?lite=true
.
Query parameter ?embed=true
The query parameter ?embed=true
produces a preview of the repl that is optimised for embeds with a minimal number of control buttons displayed for a less cluttered view:
<iframe frameborder="0" width="100%" height="500px" src="https://replit.com/@ritza/demo-embed?embed=true"></iframe>
Query parameter ?lite=true
The query parameter ?lite=true
produces a full preview of a repl in an embed, with all the control buttons and panes displayed:
<iframe frameborder="0" width="100%" height="500px" src="https://replit.com/@ritza/demo-embed?lite=true"></iframe>
Embedding on WordPress
WordPress does support oEmbed, but will only embed content from an approved whitelist of websites. Check out the WordPress documentation for instructions on adding Replit to the whitelist. Once Replit is added, a repl URL formatted as https://replit.com/@username/repl-name
will automatically embed an interactive copy of the repl in your WordPress site.
Embedding on Medium
To embed your repl on Medium, paste the repl link https://replit.com/@username/repl-name
into your Medium post and hit "Enter".
Embedding on Ghost
To embed your repl on Ghost, paste the repl link https://replit.com/@username/repl-name
into your Ghost post. The link will automatically be converted to an interactive IDE, where you can edit and run code.