Quick Start
The goal of CoCube is to make it easy to create and share useful tools. It combines reactive cells from spreadsheets, event-driven interactivity from web pages, and the visual workflow of vector graphics design tools into a single system.
This guide is an introduction. It will walk through the fundamental concepts you need to get started, beginning with small examples and building toward creating a basic knowledge management system. The guide doesn’t assume you know anything about software development. It assumes you are familiar with functions and expressions similar to what you would see in a spreadsheet.
CoCube is in early-release. Be aware that updates may alter or break your saved components. A desktop browser with WebGPU support is required (Chrome is highly recommended). Join r/CoCube to ask questions or provide feedback!
What this guide covers
High-level workflow.
What is a component?
Creating a component.
Modify appearance.
Cells and references.
Adding reactivity.
Combining components.
Collaboration and publishing.
High-level workflow.
The high-level workflow is as follows.
- Create components that can view and modify their input data.
- Combine simple components into more complex and useful tools.
- Optionally share and collaborate on these components with others.
What is a component?
Components are the collaborative, visual documents you create with CoCube. You can think of a component like a sheet in a spreadsheet. Like a spreadsheet, all data in a component exists in reactive cells. However, unlike a spreadsheet, a component is not displayed as a grid. Instead, the cells it contains define how it looks and behaves.
Every attribute of a component is defined in a cell, and these cells are grouped hierarchically in nodes. This allows everything from appearance to behavior to be defined reactively. Combine this with a fully featured event system allowing nodes to change cells in response to events like clicks, keypresses, mouse hovers, and more, and you have a powerful way to quickly build useful tools and visualizations. This system is flexible enough that CoCube's console and editor is built using CoCube itself.
The first step to understanding this is to talk about the building blocks of components: 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 component 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 of 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. |
Creating a component.
Navigate to the console.
Click to create and open a new component.
You should see a single node rendered as a green square. This is how a node is displayed when no cells are set.
Modify appearance.
Secondary-click on any node to open the editor.
Insert a cell, then click the cell in the node editor to begin modifying it.
Cells and 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.
Adding reactivity.
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.
Combining components.
After creating a component, you can then add it as a child to another component.
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 component.
Collaboration and publishing.
Once you have something you want to publish just make it public and share the URL.