Codux Glossary

Board 

A visual representation of a component (or multiple components), shown in a particular state/variation.

Template Project 

A bare-bones React app that comes with initial setup (and possibly some components) to get you working in Codux right away.

Branches 

A built-in Git feature to keep your work tasks separate from those of your team, and to help you get review of your work from your team when ready.

Clone 

A built-in Git feature that copies projects from GitHub to your computer, while still enabling you to sync changes to and from other users to work on the project as a team.

Code Drawer 

The area beneath the stage where you can see and edit the code of your component and other files in the project. You can also view error messages, warnings, and other logs/info that are produced while running the component's code in the code drawer's Log tab.

Commit 

A built-in Git feature to keep track of progress and changes made to a project while working on it.

Commit History 

A listing of all previous commits made to the branch.

Component Documentation 

Automatically-generated documentation for your component APIs (how each prop in the component receives its input), useful alongside components as they're built.

Components 

Reusable bits of code in your project that independently represent parts of your UI.

Computed Styles Panel 

Like developer tools in a web browser, the Computed Styles panel is where you can see what styles apply to your elements. From here you can copy styles and jump to the areas in the Styles panel or code drawer where you can make changes to them.

Elements 

Elements are the building blocks that make up your component. They can be anything from an HTML tag to another component inside the component.

Elements Panel 

A visual representation of the structure of a component which may contain HTML elements and other components from the project. Navigate between different scopes of the component and access its inner components from here.

Element State 

Conditional elements have states that are controlled by programming. These states determine things like whether the element should appear on the board or in your app at a particular time. Elements that have an inactive state show up as grayed out in the Elements panel, and are called inactive elements.

File Explorer 

A built-in graphical interface for accessing project files in Codux. You can select a code file to edit it directly in Codux (it opens as a new tab along the top).

Git 

An open source version control system that manages files associated with projects on your computer. Codux has Git functionality built right in. The Git section in the left panel lists all files in the current branch that were changed locally and are ready to be committed.

Top Bar 

The top area of Codux with access to the most common Git tasks, like switching between branches, and syncing changes to and from the project repository.

Preview Mode 

One of the board modes where you can interact with your components on the stage to see how they respond as you play with them.

Merge 

Bring changes from another branch into your branch.

Projects Screen 

The screen that appears when you first open Codux. From here you can load an existing project, or open a new one from a local folder or remote repository, or open the tutorial project.

Properties Panel 

A panel in Codux where you can see, edit, and provide values for your component properties and HTML attributes to achieve a specific state for them.

Pull Request 

A way ​​to discuss with your peers the proposed changes committed to a branch before they are integrated into the project.

Safe Render 

A feature of Codux that detects runtime errors in a component's code, properties, or children (anything from undefined properties to elements that cyclically call one another). Safe Render isolates the errors, allowing the rest of the components to still render on the board.

Select Mode 

One of the board modes where your components can be validated visually by checking their properties and seeing what styles apply to them. In Selection mode, you can make edits to selected elements from the panels on the right.

Stage 

The center of Codux, where you can validate and interact with your boards, and see how they behave in different scenarios.

Style Classes 

A way to create styles once, and then apply them to as many elements as you want.

Style Controllers 

Visual tools in Codux to control an element's CSS properties.

Style Selectors 

Ways to target HTML elements to apply styling to.

Styles Panel 

The visual editor in Codux where you can make styling changes to elements in your components. In this panel, you can directly edit the classes and selectors applied to the element selected in the Elements panel.

Sync 

A built-in Git feature that brings in (pulls) and sends out (pushes) the latest changes in the branch you're on. You can also publish a new branch using Sync.

Visualizer 

A way to input and change the properties and attributes of a component in Codux in the Properties panel. Color pickers, for example, are great for selecting the color to style an element, while strings are great for changing text, and booleans for true/false logic.