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.