Embeds on Glitch

You can embed Glitch apps anywhere on the web: a blog post, a landing page or in your documentation. It works with most blogging tools like Medium and WordPress, and you can completely customize the look and feel of your embed — choose to show your app, the code that powers it, or both at the same time.

Generating an Embed

You can create the HTML code for an embed within the Glitch editor. Select the 'Share' button, and click on the 'Embed Project' option.

You can customize the embed by dragging ↕ or ↔ to resize the panes, you can toggle the filetree, change which code file is shown, as well as hide attribution, and choose to show the app, the code or both at the same time.

Customizing an Embed


Swap panes

By default when you elect to show both the code and the app preview, the code is shown on the left and the preview on the right. To reverse this, toggle 'Swap Panes' or append the following parameter to the embed URL:

previewFirst=true


Default: code left, app right:


Swapped panes: app left, code right:

Show only the app

By default both the code and the app preview are shown. If you'd like to only display the app preview, select 'App' or append the following parameter to the embed URL:

previewSize=100


App-only:


Show only the code

By default both the code and the app preview are shown. If you'd like to only display the code, select 'Code' or append the following parameter to the embed URL:

previewSize=0


Code-only:


Adjust the app preview width

By default both the code and the app preview are shown. If you'd like to change the width of the app preview to show more or less of it, drag ↔ or append the following paramter to the embed URL:

previewSize=X (where 'X' is an integer >0 and <100)

Hide the filetree

By default when you elect to show just the code, or both the code and the app preview, the filetree is shown. To hide the filetree click on the left arrow at the top of the filetree, or append the following parameter to the embed URL:

sidebarCollapsed=true


Filetree shown:


Filetree hidden:

Hide attribution

By default the avatar of the creator or creators of a project are shown in the footer of the embed. To hide attribution, check the 'Hide Attribution' box or append the following parameter to the embed URL:

attributionHidden=true


With attribution:

Without attribution:

Change the code file shown

To set a specific code file to be shown in the embed you can select the file in the filetree, or specify the path to the file by adding the following parameter to the embed URL:

path=X (where 'X' is path and name of the file e.g. views/index.html)

Adjust the embed height

You can change the height of the embed by dragging ↕, or changing the height value in the containing DIV tag of the embed code:

height: Xpx (where 'X' is the number of pixels high you want the embed to display)

Note that you can't specify the height of an embed on Medium.

Embedding an app on Medium

Typically embed URLs have the following format: https://glitch.com/embed/#!/embed/project-name?parameterName=parameterValue

However, on Medium you have to use the project URL as the embed URL, so it's format is like the following instead: https://glitch.com/edit/#!/project-name?parameterName=parameterValue

On Medium, select the add an embed option, then paste in the URL and hit enter.


Note that you can't specify the height of an embed on Medium.