Codux Configuration Reference

Codux handles configuration through a file named codux.config.json in the root of the project folder. If you are starting your project using one of our boilerplates, this file will already be in the project. Otherwise, create an empty file named codux.config.json, and place it in the project's root directory (or package root if it's a monorepo).
Important!
While most configuration keys are optional, you do need to configure a path for new components in your project. Otherwise, users will not be able to create new components in Codux. To learn how to add this key to codux.config.json, refer here.
Here are the available configuration options for Codux:
  • newComponent (REQUIRED): Configures the default paths for new component and template files.
  • addPanel: Enables scoped NPM package of your own libraries to be consumed through the Add Elements panel.
  • boardGlobalSetup: Specifies modules to evaluate before rendering any boards in your project.
  • boardsPath: Configures how SVG assets load in Codux.
  • componentsDiscovery: Scopes component discovery in your project.
  • conditionalClassnamesConfig: Options for using the classNames utility library, including path to classNames module, and target export.
  • conditionalRenderers: String[] with names of components like <Routes />, used for conditional rendering based on URL or other logic.
  • cssCompilation: Enables CSS modules in your project.
  • fileNamingConvention: Configures file-naming convention for new component creation.
  • formatting: Formats code styling in the Codux code drawer.
  • httpServerPort: Port of HTTP server to serve previews and the project itself.
  • ignoredSubPaths: Specifies project folders to exclude from component search.
  • maxThumbnailSnapshotDelay: Maximum time (in milliseconds) to postpone capturing a thumbnail for the board.
  • newBoard: Additional configuration for new boards (templates path).
  • previewConfiguration: Specifies environment variables to use globally across the project.
  • resolve: Provides ways to manage your NodeJS project's module directories, create aliases, set fallback mechanisms, and customize package exports.
  • safeRender: Configures maximum rendered elements (safe mode).
  • sassCompilation: Adds Sass support to compilations.
  • scripts: Configures scripts for project users to run from Codux or to run automatically through triggered actions.
  • serverProxyMap: Configures proxy servers for Codux to redirect requests to.
  • staticServerRoot: A path relative to the project root to serve static files from.
  • styleFilesConfig: Configuration related to style files.
  • styling: Default styling solution of the project.
  • svgLoader: Configures how SVG assets load in Codux.
  • tailwindcssConfig: Customizes the path for the Tailwind configuration file.
For autocompletion and validation while working on configuration in IDEs that support JSON schemas, make sure to use our $schema property in your project's codux.config.json file, and set its value to the URL of the Codux configuration schema like this:
1
2
3
4
 {  
     "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
     …
 }
Next article