top of page

Build UI visually with production-ready code.

Where designers and developers can collaborate in real-time for faster workflow. All in one place.

A visual workspace
for any React project  

→

Create applications, develop components and build design systems.

Codux editor showing a component of a music playlist with three songs listed. The elements panel is open on the left and the design panel is open on the right.
Codux editor showing a component of a music playlist with three songs listed. The elements panel is open on the left and the design panel is open on the right.

STAGE

Drag and drop components and elements in a real-time responsive environment.

ELEMENTS PANEL

Gain rendering insights into components structure, select and manipulate as desired.

EDITING PANEL

Use visual controllers to view and modify styles and properties.

ADD PANEL

Add any component or element from personal or third-party libraries.

SHARE

Seamlessly collaborate with teammates and clients in an online project playground.

GIT

Work in branches, commit and review changes.

CODE DRAWER

Navigate code visually and work alongside your preferred IDE.

Pixel-perfect & scalable

Push design limits without compromising code quality.

Where designers can

→

Visually create code-based components according to web standards

→

Edit CSS using visual controllers to style flex layouts, grids, colors and more

→

Work with third-party libraries or their own in-house components

The Add Elements panel showing different elements including Div Block, Span, Audio, Video, Line Break and List Item.
The Add Elements panel showing different elements including Div Block, Span, Audio, Video, Line Break and List Item.

Where developers can

→

Visually inspect any element and instantly locate it in the source code

→

Use existing tech stack and external packages as desired

→

Configure the editor to follow their conventions and coding style

A component of a gradient blue shape is selected. Below is a drop down menu featuring the options to Duplicate, Edit Code, Open in VS code, and Delete element. Edit Code is highlighted.
A component of a gradient blue shape is selected. Below is a drop down menu featuring the options to Duplicate, Edit Code, Open in VS code, and Delete element. Edit Code is highlighted.

Design testing & UI fixes

Let every team member own their domain.

Where designers can

→

Make UI tweaks in production under developer’s review

→

Seamlessly create and test components in different states and variants

→

Reuse components from the design system and access them during development

Dashboard of an app called Cloudcash, where Overview is selected from the top menu bar
an image of a visual controller for layout and the flex option is highlighted.
an image of a color picker
An image of a visual controller for layout and the flex option is highlighted and a dashboard of an app called Cloudcash, where Overview is selected from the top menu bar

Where developers can

→

Collaborate with the team and review changes using Git

→

Validate real world test cases for different states and variants

→

Work in isolation to focus on business logic and implementation

Dashboard of an app called Cloudcash, where Overview is selected from the top menu bar.
button variants board shown in different styles for selected, hover, default and disabled.
Button variants board shown in different styles for selected, hover, default and disabled and a dashboard of an app called Cloudcash, where Overview is selected from the top menu bar.

Collaborative workflow & rapid development

WHERE DESIGNERS CAN

Access project repo and view components at any stage

Git branches panel on a black background, with several branches listed. One branch is highlighted and marked as current

Use Git feature branches to isolate work and design safely

Commit Changes panel showing 2 files selected and a message that reads “Navigation button changed, also minor fix to the width of the sidebar

Share a link to an online playground of their latest work for feedback

Share window shown for a project called Cloud-cash to share online. Two fields shown, one for Link name and one for Project link

WHERE DEVELOPERS CAN

Work side-by-side with your preferred IDE

panel of written code for statistics component app
A gradient image titled Outcome Statistics shows an icon for Shopping and an icon for Electronics

Develop faster
by reducing feedback loops

Commit changes panel showing three different commits of messages sent from a designer to a developer.

Render components from the project source code in real-time

Upgrade component for the Cloudcash app with a large, blue Upgrade button
Upgrade component for the Cloudcash app with a large, blue Upgrade button

The tech stack

FRAMEWORKS AND LANGUAGES

STYLING SOLUTIONS

THIRD-PARTY LIBRARIES

React

TS

CSS

Sass

CSS Modules

Stylable

Tailwind

Material UI

Bootstrap

Ant Design

Radix

Framer Motion

Blueprint

Design and code—always in sync

bottom of page