Build web interfaces with plain JavaScript.

basic.js creates the page objects for you. No HTML markup, no CSS files, no build step: write one function and open the page in a browser.

12 KB gzipped · 0 dependencies · No build step · Apache 2.0

Keep simple things simple

Reads like the screen. The code of a screen follows its layout: a group, a title, a button. You understand it at a glance, months later too.
Small and dependency-free. One 12 KB file works directly on the DOM. No framework runtime, no virtual DOM, no node_modules.
No build step. Add a script tag, save, refresh. There is nothing to compile, bundle or configure.
Full control in one place. Layout, style and behavior live together in JavaScript, so there is no markup and stylesheet to keep in sync.

The same card, two ways

With HTML and CSS a screen is split into markup, styles and scripts that must stay in sync. With basic.js it is one function that reads like the screen.

Everything you need fits on one screen

basic.js has a handful of concepts. Learn them once and you can read any page built with it.

Objects. Box, Label, Button, Input and Icon. Settings go in one object; positions (left, top, width, height) can come first.
that. The object created last. Style it right after you create it, without a variable.
Containers. Objects created between startBox() and endBox() go inside that box. Every start has its end.
AutoLayout. HGroup and VGroup place their objects in a row or a column, with gap, padding and alignment.
Events. on("click", ...) on any object. The handler gets the object itself and the event.
Motion. Tell an object what to animate with setMotion(), then just change its properties.

Start in three steps

Get the basic folder. Copy the basic folder (basic.min.js, basic.min.css and the font folder) next to your page.
Create a page. Load the two files, then your own script. The body stays empty.
Write start(). basic.js creates the page and calls start(). Open the file in a browser, or with VS Code Live Server.

More than a library

basic.js comes with a handbook, a component suite and ready app templates, all written with the same few ideas.

Handbook: 16 chapters, from the first Box to motion and utilities. Every example runs in the page.
Components: 72 ready components: tabs, tables, date pickers, charts, toasts, modals… each with a live example and its code.
App templates: A modular admin panel, an installable PWA shell and forms that post to a service. Start from a working app.
VS Code tools: Extensions for basic.js: code completion, an object navigator and a view inspector.

Download from GitHub · basic.js is open source under the Apache 2.0 license.