Embed Idyll directly in an HTML page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
<script src="dist/idyll-embed.min.js"></script>
<script>
// Create a new div where Idyll will inject content.
var div = document.createElement('div');
document.body.appendChild(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);
</script>
</body>
</html>- Clone this repo
- Run
npm installto install the dependencies. - Edit
index.jsaccording to your own use-case. See the comments inindex.jsfor more info. - Rebuild the dist file:
npm run build - Include the newly created JavaScript file (
dist/idyll-embed.min.js) in your HTML.