TIP: Try navigating through list using left & right arrow keys

embedded in HTML

Embed Idyll directly in an HTML page

Github issues
Github stars
about 1 month ago
Github last update date


Embed Idyll directly in an HTML page


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <script src="dist/idyll-embed.min.js"></script>
      // Create a new div where Idyll will inject content.
      var div = document.createElement('div');

      // Get your markup.
      var idyllMarkup = '# Hello World';

      // All standard components are available by default.
      // To add additional components, register them.
      Idyll.registerComponent('ComponentName', Component);

      // Instantiate the Idyll runtime.
      Idyll.render(idyllMarkup, div);

How to modify this library for your own needs

  1. Clone this repo
  2. Run npm install to install the dependencies.
  3. Edit index.js according to your own use-case. See the comments in index.js for more info.
  4. Rebuild the dist file: npm run build
  5. Include the newly created JavaScript file (dist/idyll-embed.min.js) in your HTML.
Buy us a coffeeBuy us a coffee