Coming soon · private beta

Tables, trees, maps and CAD that work the same way.

CoralJS is a UI kit for working software. Its tables edit like a spreadsheet, its trees run from the keyboard, and its CAD view opens DXF and STL files in the page. Every part uses the same keys and gestures, in light and dark, and every step you take can be undone.

You are on the list. We will email you when your invite is ready.

That address did not work. Enter a full email address, like name@example.com.

We send one email, when your invite is ready. Nothing else.

What is in the kit

Coral.table

A data table that edits like a spreadsheet. Sort, filter, select with the arrow keys, and copy and paste rows with Excel. It fits a 390 px phone with no sideways scroll.

Coral.tree

A tree view for large hierarchies. Full keyboard control, type-ahead, and a filter that keeps each match's parents in view.

Coral.map

A map that keeps working offline. Vector tiles when the network answers, its own coastline drawing when it does not.

Coral.cad

A CAD view you drop a file on. A DXF gives cut length, pierces and parts. An STL gives a 3D model with size and volume.

Coral.keys

One keymap for everything. The wheel zooms at the cursor, Home shows all, and the same keys work in every part.

Coral.history

An undo tree on every page. Each scroll, each field you leave and each save is a step. Ctrl Z goes back up the tree and Ctrl Y comes down again. Nothing you undo is lost. Try it here: scroll down, then press Ctrl Z, or open History at the top.

Every function in the kit has its own page, with its code and the way house pages call it: the function library.

Try it here

These are the real parts, running in this page. Click a cell and type, or use the arrow keys. Tab moves on, / filters, a header sorts, and Ctrl C copies rows you can paste into Excel. Amount is a formula, =qty*rate. Every change is a step in History at the top.

A tree, from the keyboard

Arrows move, → opens, ← closes, and typing a few letters jumps to a match. The filter keeps each match's folders in view.

UIC: you I see

Every Coral part changes a value the same way: where it stands. We call it UIC, for Underline, Initials, Contenteditable, and say it “you I see”, because whoever is looking can see what you are changing.

U Underline

A thin line in your colour runs under the value while you type. The value keeps its place and its size. No box pops up, there is no focus ring, and nothing else on the page moves.

I Initials

Your initials sit at the end of that line. In a shared session each person has a colour, so everyone sees who is changing which number, as they type it.

C Contenteditable

You type over the number itself. Enter or clicking away keeps it, and Esc puts it back. Text that is not a number turns red and is not kept.

Try it

Click a size and type a new one. Here you are YOU. AK is a colleague who is changing the hole size at the same time.

The same mark is on every Coral.table cell, every Coral.cad dimension and every Coral.props value, including the table above. In your own code it is one call:

Coral.uic(cell, true) // the line, and your initials at its end Coral.uic(cell, false) // gone