Skip to content

Jux Configuration File

Configuring Jux allows you to customize its behavior to fit your project’s needs. By default, Jux uses a configuration file named jux.config.ts in the root of your project.

A valid Jux config file exports its configuration using the default export. Using defineConfig is recommended for automatic type hints in your IDE, but not required.

jux.config.ts
import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* Your configuration goes here */
});

preflight

  • Default: true

Whether to apply css reset styles. Preflight styles are a set of base styles that normalize the appearance of HTML elements across browsers.

You can check the default styles in the Preflight section of the documentation.

include

  • Default: []
import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
include: ['./src/**/*.{js,jsx,ts,tsx}'],
exclude: ['./src/components/jux/not_for_watch_page.tsx'],
});

An array of glob patterns that specify which files Jux should watch for changes. Jux will only parse files that match these patterns.

exclude

  • Default: ['**/*.d.ts']

An array of glob patterns that specify which files Jux should ignore.

globalCss

  • Default: {}

Apply global CSS styles to your project. Global CSS are inserted at the top of the generated CSS file and are scoped to @layer base cascade layer.

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
globalCss: {
'html, body': {
fontFamily: 'Inter, sans-serif',
margin: 0,
padding: 0,
boxSizing: 'border-box',
},
},
});

core_tokens

  • Default: {}

Define your design system’s core token:

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
core_tokens: {
color: {
brand_100: {
$value: '#0070f3',
$description: 'Primary brand color',
},
brand_200: {
$value: '#ff0080',
$description: 'Secondary brand color',
},
},
dimension: {
spacing_100: {
$value: '8px',
$description: 'Base spacing unit',
},
},
},
});

Learn more about defining tokens and the different categories you can use in the Tokens & Themes section of the documentation.

themes

  • Default: {}

Define your design system’s themes:

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
core_tokens: {
color: {
brand_100: {
$value: '#0070f3',
$description: 'Primary brand color',
},
},
},
themes: {
light: {
color: {
primary: {
$value: '{core.color.brand_100}',
$description: 'Primary color',
},
secondary: {
$value: '#f1f1f1',
$description: 'Primary color',
},
},
},
dark: {
color: {
primary: {
$value: '{core.color.brand_200}',
$description: 'Primary color',
},
secondary: {
$value: '#333',
$description: 'Primary color',
},
},
},
},
});

Learn more about defining themes and the different categories you can use in the Tokens & Themes section of the documentation.

presets

  • Default: []

Use configuration presets to share settings across projects. Any preset will be merged with the rest of the configuration, acting as a set of overrides / extensions.

import { defineConfig } from '@juxio/cli';
import baseConfig from '@acmecorp/base-jux-config';
export default defineConfig({
/* ... */
presets: [baseConfig],
// Will be merged with the base config
core_tokens: {
color: {
brand_100: {
$value: '#0070f3',
$description: 'Primary brand color',
},
},
},
});

Learn more about presets in the Presets section of the documentation.

utilities

  • Default: JuxUtilitiesBase

Create custom CSS properties that can be used when you style your components.

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
utilities: {
mx: {
transform: (value) => {
return {
marginLeft: value,
marginRight: value,
};
},
},
},
});
// css({ mx: '12px' }) => { marginLeft: '12px', marginRight: '12px' }

screens

  • Default: {}

Customize the breakpoints used in your project.

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
screens: {
xs: {
max: '639px', // => @media (max-width: 639px) { }
},
sm: '640px', // => @media (min-width: 640px) { }
md: {
min: '768px',
max: '1024px',
// => @media (min-width: 768px) and (max-width: 1024px) { }
},
lg: {
min: '1025px', // => @media (min-width: 1025px) { }
},
custom: {
raw: '(orientation: landscape)', // => @media (orientation: landscape) { }
},
},
});

Learn more about utilities in the Utilities section of the documentation.

cssVarsRoot

  • Type: string
  • Default: :where(:root, :host)

Specify the root pseudo-class for CSS variables.

builtInFonts

  • Type: BuiltInFonts
  • Default: {}

A helper object to specify fonts to use in your project (currently supports Google Fonts only).

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
builtInFonts: {
google: ['Inter', 'Poppins'],
},
});

This will automatically add the following import to Jux CSS file:

@import "https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese";
@import "https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,latin-ext";

browserslist

  • Type: string[]
  • Default: []

Specify browser targets for compatibility.

import { defineConfig } from '@juxio/cli';
export default defineConfig({
/* ... */
browserslist: ['> 5%', 'last 2 versions', 'not dead'],
});

components_directory

  • Type: string
  • Default: ./src/jux/components

Specifies where to pull generated components when working with Jux editor.

tokens_directory

  • Type: string
  • Default: ./src/jux/components

Specifies where to pull design tokens when working with Jux editor.

definitions_directory

  • Type: string
  • Default: ./src/jux/types

Specifies where to pull generated type definitions when working with Jux editor.