Codux Help Center

Browse our articles to find the answers you need

Working on Projects

Codux Editor

Elements Panel

As you may know, elements are the building blocks of components. Components may contain any number of HTML elements and inner components inside them.When you open a board in Codux, you'll see on the left side o

Properties Panel

Codux automatically scans your components for properties and generates corresponding inputs in the Properties panel on the right side of the screen. For instance, if you have a Button component, Codux identifie

Styles Panel

As your component designs become a reality, and you're able to see them onscreen in Codux, you'll probably see some styling that needs to be changed. Codux shines when it comes to providing the visual tools nec

Computed Styles Panel

Sometimes you might want to understand where an element in your component is receiving its styling from, and this isn't always easy to do when projects can contain multiple stylesheets with many rules. The Comp

Selecting and Interacting With Components

The stage in Codux is where you can see components rendered. You can view, edit, and interact with with your components on boards, and see how they behave in different scenarios. The default mode for the stage

Add Elements Panel

The Add Elements panel lets you quickly insert HTML elements and inner components into your board components. You can open it by clicking the + icon above the Elements panel, or by pressing Alt+A / ⌥+A on your

Consuming Board Content from Add Elements Panel

Boards with content added to the Add Elements panel appear inside the panel in a section labeled Project Library.These are boards with components or HTML elements that have specific permutations of props, state

Media Management in Codux

Whether you're a designer or developer, having access to your project's media files is crucial. With Codux, you can see all your project's images and SVGs right from the Add Elements panel, and add them visuall

Changing Prop Visualizer Types

Visualizers give you a quick way to input values for your component's properties and attributes. For example, a product-related component likely has a title prop to represent the title of the product (as in the

Codux Safe Render

Codux Safe Render is a feature of Codux that detects and isolates issues in code so that boards can still render non-problem code. When Codux detects an issue, Safe Render kicks in automatically.For example, in

Editing Code in Codux

Codux, the state-of-the-art visual IDE for React that it is, merges the ability to render visual components in real-time with the utility of a code editor (which uses the same engine that drives Microsoft VS Co

Editing Code Alongside Your IDE

With Codux, you can seamlessly work on your project visually alongside your IDE. Codux automatically detects VS Code and WebStorm when installed on your machine, and offers you to open the IDE and jump to the r

Using Prettier to Format Code

Prettier is a code formatting tool that makes your code more readable, consistent, and easier to maintain. It takes messy, unformatted code and formats it in an aesthetically pleasing manner while also keeping

Codux Keyboard Shortcuts

Keyboard shortcuts enable you to perform many actions in Codux directly from the keyboard. This article lists the default shortcut bindings for Windows, Linux, and macOS computers.View ActionWindows/LinuxmacOSR