Supported Technologies

Codux supports any React project built in TypeScript that uses CSS, CSS modules, Sass, or Stylable as its styling solution. Codux also has basic support for Tailwind CSS - see here.
If your project meets these requirements, you can expect to be able to edit the structure and styling of your components in Codux regardless of where they came from. Codux can open components from existing projects, template projects, and projects started from scratch.
Codux loads static project assets using built-in asset handling by default, with extended SVGR support for svgs. For information on configuring how SVG assets load, refer here. For a complete list of configuration options for Codux, refer to the Configuration Reference.
Tip!
Codux is equipped with Git version control functionality that makes working with your team easy. It supports syncing your team's work to and from remote repositories. To sync your team's work, ensure that the project is on a remote.

Version Requirements 

Use this table to check that your project meets the minimum version requirements for all technologies.
Technology
Version
React
18.0+
TypeScript
4.1+
Node.js
14.21.2+
Dart Sass
3.0.0+
@wixc3/react-board (installable through project scripts)
1.3.0+
Note:
We don't officially support React Native at this time.

Package Managers 

Package managers automate the process of installing, updating, and removing project packages. Codux uses a package manager when you open a project to do two things:
  • Offer to install node modules if the project was just freshly-cloned.
  • Offer to install @wixc3/react-board if the project doesn't have it yet.
Codux figures out which package manager a project uses automatically, and then runs the corresponding install command to install these. It does this based on the presence of a package lock file in the project directory (the file that records the exact versions of the dependencies that are installed for a project). If it finds a yarn.lock file, for example, it runs yarn install to install packages. If it does not find any package lock file, or if it finds more than one, it assumes that the project uses npm and runs npm install.
Note:
Codux doesn't touch log files or amend a project's package.json file in any way, with the exception of adding the required @wixc3/react-board package to the manifest.
To specify which package manager to use and not leave it to Codux's heuristics, configure codux.config.json with a project script command like this:
1
2
3
4
5
6
7
8
9
10
11
{  
    ...
    "scripts": {
        "install": {
            "title": "Install",
            "description": "Run install",
            "command": "yarn"
        },
    }
    ...
}
Configuration like this will have Codux run the yarn command instead of the default package manager.
Codux supports the following package managers:
  • npm: The default package manager for Node.js. It uses a file named package-lock.json to lock the dependencies. Codux supports the latest version of npm.
  • yarn: A common alternative to npm. It uses a file named yarn.lock to lock the dependencies. We've thoroughly tested yarn v1, but other versions may work depending on the configuration. Yarn Plug'n'Play (PnP) is not supported at this stage.
  • pnpm: PnPM uses a file named pnpm-lock.yaml to lock dependencies. Codux does support PnPM, but to an experimental extent. Due to different node module layouts created by PnPM, some functionality may not work as expected. We are working to improve compatibility.
Note:
If you are using a monorepo or PnPM in general, you may encounter some issues with Codux. This is because PnPM creates a different node modules layout than npm or yarn, which may affect how Codux resolves dependencies and runs commands. We recommend using npm or yarn for monorepos until we fix these issues.
Note:
If your project is a monorepo, open Codux at the root of the monorepo where the package lock file resides, and not at any single package within the packages directory.
Important!
If you are switching between different branches that use different package managers, you may experience some unexpected behavior with Codux. This is because Codux relies on the package lock file to determine which package manager to use, and this file may change when switching branches. We suggest using the same package manager across all branches to avoid this problem.
Note:
You can't add Tailwind classes through the controllers UI yet. You will not see the selectors generated by Tailwind classes in the UI either, but we're working on improving our support for Tailwind CSS and other frameworks in future version updates – stay tuned!
IN THIS ARTICLE
Next article