Quick Start

What is CoCube?

CoCube is a workspace for building composable tools. What does that mean? It means you can create and combine interactive components to build nearly any 2D vector-rendered software you can imagine. These components could be charts, calendars, tables, documents, and more. CoCube comes with a set of useful built-in components to start with. These components can be flexibly combined like Lego blocks to create useful tools.

Create a system.

The point of CoCube is to create useful tools and systems that you can use yourself. Combine built-in components to get started quickly. You can snap these components together to create nearly any tool you can imagine, from todo lists to complex note-taking systems to custom data visualizations.

CoCube gives you complete control to combine components however you want.

Work entirely locally.

Everything you create with CoCube is stored locally on your device. From building custom components to creating and using your system, you never have to share your data with CoCube's servers. This makes CoCube perfect for building e.g. private knowledge bases. When you need to work with others, you can enable sync and collaboration features on a per-component basis. This allows you to keep most of your data private while still enabling collaboration exactly where you need it.

Build custom components.

When the built-in components are insufficient, you can create your own components.

CoCube provides a simple, declarative language for building UI components, inspired by spreadsheets. This language is nowhere near as complex as, e.g., HTML, CSS, and JavaScript, but has nearly as much flexibility. The main feature of the language is allowing spreadsheet-like cells and expressions to define any attribute of a component, from its color to its behavior. Editing in this language is done with the component editor, which allows you to visually construct and modify a component in real-time. It is designed to make building reactive vector-rendered components as simple as possible.

Many tools similar to CoCube give you a set of opaque built-in components. Not here. Everything in CoCube, including every built-in component, is created in this simple but powerful language. Even the console, expression builders, and the component editor were created this way. From layout components like DynamicRow and DynamicColumn to text components like TextEditor, if a component doesn't work how you want it to, you can make your own alternative.

What is a component?

Creating a component.

Navigate to the console.

Click the Create Component button to create and start editing a new component.

With the editor open, you should see a single component rendered as a green square. This is how a component looks when no cells are defined.

See Create: Interactive Bar Chart for a step-by-step walkthrough of creating an interactive chart component from scratch.

Modifying appearance.

Let's change the color of the new component.

Create a new cell with the name Color. Capitalization matters when naming cells, Color is different from color. When naming the cell you want to insert you should also see a popup with a few common cell names. These are attribute cells - the cells which change the appearance or behavior of the component. Feel free to select Color from the list instead of typing it out.

When the cell is created, it will contain a default value. To change this value, click the cell itself in the cells panel. This will open the expression editor for that cell.

Since we are editing the Color cell, we want the cell to contain a Color, not a Number, Text, or any other type of data. You can change the type of data using the expression editor, by clicking on the type dropdown and selecting Color. Once the Color cell contains a Color you should see your component change.

Combining components.

Let's say you wanted to add a component to another component. This is where the Components attribute cell comes in. The following is a definition of a component containing two subcomponents named Little and Big.

The easiest way to add new components like this is to use the Components panel. Alternatively, you can just set the Components cell yourself. This cell expects a Map containing Components and/or Views.

After creating a component, you can then add it as a subcomponent to another component using a View.

Overriding cells.

Overriding cells is what allows generic components to be customized for a given use-case.

Selecting a component in the Components panel opens the editor on that component. If the subcomponent is included as a reference, then modifying its cells while it is selected just overrides the cell for that specific reference.

Selecting a child component that is defined directly (e.g. is a Component not a View) allows you to edit the nested component directly - NOT setting overrides.

Cells and references.

Cells can reference other cells via a few functions.

Here is a component that uses a reference to compute its size dynamically:

Modifying the Width cell would cause the Height of the component to change as well; in this case, the height will always match the width.

To read a cell in a parent component use e.g.:

This function reads the Width of the containing component. For example:

In this component, any change to the containing components Width cell will result in a change to the subcomponents Height.

Adding reactivity.

Components can be configured to react to events.

To make a component reactive, set the EventHandler cell to an EventHandler.You can then configure the event handler inside the expression editor.

Event handlers work using two concepts: Matchers and Actions.

A matcher allows you to choose what events the component will listen to. For example, if a cell should be modified when the component is clicked, then the matcher would be:

Once a matcher is selected, actions can be added. Say the components Color cell should be changed. To do this, add the following action to the event handler:

The matcher would then trigger the action when the component is clicked, changing its color.

SetCell can take any expression, and that expression is evaluated when it matches an event.

Every matcher can have any number of actions associated with it.

You will also see an option to either bubble or capture the matched event. Capturing the event means the event will not propagate to parent components after the actions have fired in this handler. Bubbling the event means the matched event will be propagated to parent components, potentially to be matched on again.

Understanding emit tags and emitted data.

It is a common occurrence that you will want to emit a custom event from a component. You can do this using the Emit action.

This action takes two arguments.

• An expression which is evaluated to an event tag (Text).
• An expression which is evaluated to any data you want associated with the event.

You can then define a matcher to match on the tag from the custom event. Use the Matched function to retrieve the matched data in an action.

Collaboration and publishing.

Once you have something you want to publish just make it public and share the URL.