Skip to content
Stupidly simple JavaScript UI building tool.
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
example.html
jbui.js

README.md

jbui

jbui allows you to create layouts in HTML and turn them into reusable DOM nodes.

How-to

It couldn't be easier.
  1. Create a component or layout you would like to re-use
  2. Put it inside a wrapper div with the class jbui and the dataset data-jbui-name
  3. Create elements inside the jbui element with the class jbuiElement and the dataset data-jbui-name
  4. Call jbui.init();
  5. Use jbui.create([the jbui-name you gave wrapper], {[jbui-name you gave element]:{"id":"myFirstBui", "value":"Hello, World", [other valid HTML/CSS properties]}}); to create a node.
  6. Add the node to your web page using [etc].appendChild, etc.

Why?

I was populating pages using AJAX and doing insane things with DOM node creation. This makes it a lot easier and nicer to work with. I realize there's frameworks that do the same thing probably better, all I need is this element reusability, not MVVM or any other niceties.

What's jbui stand for?

Something like Just Build User Interfaces. I like to throw B's into my software names because I'm a narcisist and also because adding random letters to acronyms makes them less likely to collide with other acronyms (my statistician tells me this is correct, trust me).

Danger Will Robinson!

I'm putting this here so strangers can play with it. This is probably going to change with reckless abandon for backwards compatibility. At some point I will turn this into something that is stable and useful, but we'll cross that bridge when we come to it.
You can’t perform that action at this time.