Skip to content
Sample component page with live preview, form, and API tables
JavaScript CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets updated note in xray js Oct 13, 2019
.eleventy.js init files Oct 12, 2019
.gitignore no need for extra js file Oct 13, 2019
LICENSE added license, this time with the file Oct 12, 2019 Update Oct 13, 2019 cleaned up init html Oct 13, 2019
package.json no need for extra js file Oct 13, 2019


Sample component page with live preview, form, and API tables

This is the sample page I demonstrated during my presentation at SmashingConf in NYC, October 15, 2019. It's a simple example that shows how a live component demo could be configured to stay in sync with its data. The component is marked up with HTML, and the data values manipulate its CSS & markup.

The code is not packaged for distribution, nor is it a fully featured component page :), but I've added a license if you'd like to reuse any of it.

This runs on:

  • 11ty, a very simple (and yet incredibly useful) static site generator
  • jQuery because the next plugin, X-rayHTML needs it, but if you have your own JS utilities and/or logic for extracting rendered code from your components to display on a component page, you could probably use your own.
  • X-rayHTML is a little script we use for our Filament Group documentation projects to display rendered component code. The one in this repo is customized to work with Vue, specifically -- if X-ray has already set up the demo markup (the init step), on subsequent passes it will only update the inner source code.
  • Vue let's us change the DOM by manipulating JSON

To view it locally:

Clone this repo to your machine and then run:

npm install

...mostly for 11ty to work. The dependencies listed above are in a package.json file, however this example code is not set up to import packages (maybe a future version will be!).

Then run

npx eleventy --serve

to serve up the page. (See 11ty's getting started page for more info on running 11ty.)

You can’t perform that action at this time.