eze

Eze demos / docs for Component / Styleguide authors

Usage no npm install needed!

<script type="module">
  import eze from 'https://cdn.skypack.dev/eze';
</script>

README

EZE

Making creating meaninful demos / styleguides easy ❤️

Build Status NPM version Donate

Powered by your github ⭐s

Install

npm install eze -D

Create a ts (tsx) file (e.g. ./src/docs/main.ts)

import { render } from "eze";

/** Render documentation */
render({
  outputDir: __dirname + '/../../docs'
}, eze => {

  /** Create a page */
  eze.page({heading: 'Welcome', subDirName: 'welcome'})

  /** Write some markdown */
  .md(`
  # Demo
  This is the demo for eze
  `)

  /** Show some complete application demos */
  .app({ entryPointPath: __dirname + '/app-1.tsx' });
  
});

Add a few npm scripts:

{
  "scripts": {
    "docs": "eze ./src/docs/main.ts",
    "docs:live": "npm run docs -- --serve"
  }
}
  • npm run docs builds the demos out to the specified folder. HTML + JavaScript. You can push the output docs folder to github, s3 or surge.sh or anywhere else you want 🌹.
  • npm run docs:live will build out the demos, serve the output folder (on port 4000 or whatever is available in ascending order), and reload any connected browsers whenever the demo changes 🌹.

Documentation

Jump to the demo for eze built with eze 📝