Adding interactive HTML /JS widgets and forms in Markdown

body {padding: 0 15px;max-width: 66ch;line-height: 1.5;overflow: auto;} @media screen and (min-width: 760px){ body { margin: 0 auto; }} img {max-width: 100%;}Adding interactive HTML /JS widgets and forms in MarkdownMake your markdown content interactive!NOTE: Looks like this app is currently under maintenanceAlso, In case you are looking for a light project management tool, checkout Slateo - https://slateo.ioTL;DRMarkdownMarkdown is a light weight markup language primarily focused on writing text based content. It is great for writing formatted text which can be edited using any simple text editor. It provides all the necessary tooling required for presenting formatted content including options for inserting links, images, quotes, tables etc.Why do we need to add widgetsMarkdown is great for presenting content and has everything needed to support it. However, it lacks interactivity. Since, people have started to use markdown to create webpages like blogs and docs, the role has extended from being a mere content page to part of an interactive website. Let's say you want to display ads, or a contact-us form, or a popup which asks user to logs in. These are not directly possible in markdown. Although, you can write html in markdown, you wouldn't want to make a markdown file dirty by sprinking heavy html and js code all over your markdown.Embedding widgets as URL or iframeSeveral existing services provide option to embed their UI as a widget via a small iframe snippet or as a URL. Since, markdown allows you to add html, you can directly copy and paste the snippet in your content.

Try to add the following snippet in your content and see what happens! ```html src='https://pages.toupas.com/shivam/markdit-embed-demo'
style="border: none; width: 100%; height: 300px" > ```

This makes embedding a widget possible in content publishing apps, like Notion, who allow embedding a URL.Embedding your own UI as widgetsYou can embed UI from services who provide iframe widget snippets or url embedding option. However, there would be times when you would want to add widgets which are not provided by any existing widget services. In that case, you can create your own embeddable widgets with ToupasCreate your UI widgets using ToupasToupas is a low-code widget creating platform which lets you create your own embeddable widgets without requiring to write html/javascript code.To create your own widgets,

In widget components page, create a widget with a component name and a variant name. This will take you to the widget builder page. (Read Create a Widget in Toupas)

Create your widget.

Click on Publish and then Embed. (Read Embedding Widget). This will take you to the embed page.

In the embed page, you will find an option to configure your widget URL.

![Widget Page URL][MarkditLogo][MarkditLogo]: https://lh3.googleusercontent.com/d/1y-CruRlWNAy4auF1dx06kUAlwU3-EazI

Update the URL and reload the page. Copy the URL.

If your publishing app allows to embed a URL, you can use this URL. Else, you can embed following snippet in your markdown content

<iframe 
    src='<YOUR_URL_HERE>'
    style="border: none; width: 100%; height: 300px"
></iframe>

Hooray! you have embedded your own custom widget in your content without requiring any coding skills.Now you can add login forms, contact-us forms, mailing list popups, your plans, checkout pages etc., in your content directly and still continue publishing in your favourite apps.