Customization

Editpix is styled with CSS custom properties. Override them in your host app and the editor adopts your palette on the next render.

Theming with CSS variables

app.css

:root {
  --editpix-surface: #0f172a;
  --editpix-surface-2: #1e293b;
  --editpix-background: #020617;
  --editpix-border: #334155;
  --editpix-foreground: #f1f5f9;
  --editpix-muted: #94a3b8;
  --editpix-accent: #38bdf8;
  --editpix-accent-contrast: #020617;
  --editpix-radius: 10px;
  --editpix-font: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Available variables

Variable	Default	Used for
`--editpix-background`	`#ffffff`	Editor chrome (topbar, rails)
`--editpix-surface`	`#f5f5f7`	Canvas workspace background
`--editpix-border`	`#d2d2d7`	Hairlines and tool rails
`--editpix-foreground`	`#1d1d1f`	Text + active tool pill
`--editpix-muted`	`#6e6e73`	Secondary labels
`--editpix-accent`	`#0066cc`	Save button, crop handles, focus rings

Tool visibility

Hide tools your UX doesn’t need. A minimal avatar editor often only needs crop and filters.

options.ts

<EditpixEditor
  apiKey={KEY}
  imageUrl={photo}
  options={{
    aspectRatios: ["1:1"],
    annotations: false,
    resize: false,
  }}
  onSave={upload}
/>

Custom output format

For product photography you usually want JPEG at 92% quality — much smaller than PNG for contone images.

options.ts

options={{
  outputFormat: "image/jpeg",
  outputQuality: 0.92,
  maxOutputDimension: 4096,
}}

Localization

Editpix ships with English, Spanish, Portuguese, French, German and Japanese strings. Pass options.locale with a 2-letter code. You can also pass a full messages object to override any single string.

options.ts

options={{
  locale: "pt",
  messages: {
    save: "Salvar",
    cancel: "Cancelar",
    crop: "Recortar",
    filters: "Filtros",
  },
}}