wizzywid

This is a very simple UI getting-started-tool for HTML, Custom Elements, and Polymer.

It does not have all of the features that a full UI designer app should -- making that kind of app is really hard, and requires a lot of work and maintenance.

👉 I've built this with the idea that if you want to customize it (i.e. add your own custom elements to it, or very specific features), you should be able to clone it, make changes, and deploy it somewhere. Bug fixes are always appreciated ❤️.

Developing

Install dependencies

  $ npm install -g bower
  $ bower install

Run the app in a local server

  $ python3 -m http.server --bind localhost 8000

Navigate Chrome to localhost:8000 to see the app.

Configuring

Disclaimer: to configure the app to have other elements than the ones it already has, you should clone it, build it, and make one of the changes below. I don't want to add a "anyone should add any element to this exact deployed app" feature because that invites a database and a bunch of XSS opportunities in the house, and that's not really the point of this project. That being said, I would like the steps below to be as easy as possible. ❤️

Also, start all of the sentences below with "In theory, ...". 😅

Adding another native element

Add another entry to the elements-native.json file. If this is a weird native element, you might have to do some code changes:

if it doesn't have a closing tag (like <input> or <img>), update dumpElementEndTag in code-view.html
if it doesn't have a "slot", i.e. you shouldn't be able to drop children in it (like <input>), you need to make 1 change each in app-shell.html. canvas-view.html and canvas-controls.html (just search for input, you'll find it.). Yes I should probably make this only exist in one place, but you know what, communicating between siblings is hard.

Adding another custom element

Add the element you want to the devDependencies section of this project's bower.json file, then run bower install. This element needs to use HTML Imports for it to work. If the import isn't of the form element-name/element-name.html, you'll have to hand craft dumpImports() in code-view.html.

Adding another sample

Add the name of the sample in elements-samples.json, and create a file in the samples directory with the same name. This file should contain a <template>, and in the template the contents of your new sample. Note that this template obviously has no shadow DOM (unless you add just a custom element), so if in it you add a <style> div {color: red}</style>, this will, of course, style all the divs in the app, and you'll have a hard time removing that code :(

Adding a new theme

To reskin the app, you need to define a set of custom properties. Check the retheme method in app.js for the list. Or see it in action.