Quick Start
Why CoCube
There are many ways to create software, why learn CoCube?
CoCube allows you to create fully customizable, reactive 2D components called cubes directly from your browser with real-time feedback when you make changes, even when you are working collaboratively.
These cubes are backed by CRDTs and stored locally, meaning you don't even need to create an account to
open the console and start building.
Every attribute of a cube is defined using a spreadsheet-like cell expression.
Anything from appearance to behavior can be defined as a reactive function, and the value of that function will be updated automatically if any of the values it references change.
This allows you to easily create dynamic interfaces, layouts, behaviors and more using a simple declarative language.
On top of this, cubes can react to events like button clicks, keypresses, mouse hovers, and more - allowing these cells to be modified in response to inputs.
This system is flexible enough that CoCube's entire console (including the editor) is built using CoCube itself!
Learning how to use CoCube will take some effort, but the payoff is a tool that can be used for a variety of tasks.
Cubes are highly flexible and can be composed and linked to build nearly any tool or system you can imagine.
What this guide covers
How cubes (collaborative components) work.
How to create a cube.
How to change layout and appearance.
How to add reactivity.
How to combine cubes.
How collaboration works.
How to publish.
What exactly is a Cube?
Cubes are the collaborative, visual documents/components you create with CoCube. You can think of a cube like a sheet in a spreadsheet. Like a spreadsheet, all data in a cube exists in reactive cells. However, unlike a spreadsheet, a cube is not displayed as a grid. Instead, the cells it contains define how it looks and behaves.
The first step to understanding this is to talk about the building blocks of cubes: nodes and cells.
Nodes
A node is a single shape or letter that appears on the screen.
A node contains a set of named cells. For example, this is a node:
Width | 100 |
|---|---|
Height | 100 |
This node has two cells, Width and Height, both set to 100. The node is displayed as a square.
A cube is a tree of nodes.
Cells
A cell is a uniquely named value defined in a node.
You can give any name you want to a cell.
Cells may be defined as values or as expressions. Cells may also reference other cells.
Nodes contain cells which define its attributes - layout, color, size, rotation, reactivity, and more.
Attribute Cells
Some cells are used to define how the node they are contained in looks and behaves.
Color | Color of the node. |
|---|---|
Width | Width of the node. |
Height | Height of the node. |
Rotation | Rotation angle the node. |
RotationAbsolute | If true, do not use parent node rotation. |
Display | Define what the node looks like (shape, letter, etc). |
AlignTo | Set where the node aligns to. |
AlignFrom | Set the point on the node which should act as the center. |
Anchor | Define where the node is aligned. Defaults to parent. |
Animation | Define the animations for the node. |
EventHandler | Define how the node reacts to events. |
Children | Children node definitions. |
Selectable | If true, the node will be selectable by the event system. |
PivotX | Define the pivot point offset in the X direction. |
PivotY | Define the pivot point offset in the Y direction. |
OffsetX | Define the node offset in the X direction. |
OffsetY | Define the node offset in the Y direction. |
ClipMask | If true, the node will act as a clip mask. Children nodes will only render directly behind it. |
Layer | If true, the node and its children will be displayed one layer above the parent. |
How to create a new Cube
Navigate to the console.
Click to create and open a new cube.
You should see a single node rendered as a green square. This is how a node is rendered when no cells are set.
Modify appearance and behavior
Secondary-click on any node to open the editor.
Insert a cell, then click the cell in the node editor to begin modifying it.
Cell references
Cells can reference other cells via a few functions.
Here is a node that uses a reference function to compute its size dynamically:
Width | 50 |
|---|---|
Height | Cell(Width) |
Modifying the Width cell would cause the Height of the node to match.
To read a cell in a parent node use something like ParentCell(Width, 1). This function reads the Width cell one level up the node tree.
Reacting to events
Nodes can be configured to react to events via the node editor.
Use the Reactivity panel to add conditions (like mouse clicks) and responses (like setting cells).
You will see the EventHandler cell added to the node after making changes in the Reactivity panel.
Compose Cubes
After creating a Cube, you can then add it as a child to another Cube.
The best way to do this is to use the node editor.
You will see the Children cell added to the node after inserting a child Cube.
Cells are collaborative
Just like with a spreadsheet, changes are shared. If you update a cell either manually or via an event handler, the cell is updated for everyone viewing component.