An independent visual design editor for creating production-ready PrimeNG themes. Start from an official preset, edit its design tokens, inspect the result in a live PrimeNG preview, and export a typed preset that can be owned and maintained with the rest of your Angular application.
Theme Studio is not affiliated with or endorsed by PrimeTek. PrimeNG is referenced only to describe compatibility with the PrimeNG component library.
Live demo · Designer · Changelog
- Visual design editor — Edit primitive palettes, border radii, semantic roles, component-level tokens, custom tokens, typography, and other theme settings.
- Official starting presets — Create a theme from Aura, Material, Lara, or Nora.
- Real-time preview — Inspect buttons, forms, tables, navigation, panels, overlays, messages, and complete sample screens while editing.
- Multiple preview modes — Switch between the component preview, login, dashboard, table, and sign-up examples.
- Apply and validate — Apply the current preset to the complete designer before exporting it.
- Typed export — Download the finished theme as a TypeScript preset file.
- Import and sharing — Restore a base64 theme token or load a shared theme through the
?theme=URL parameter. - Light and dark modes — Review both color-scheme variants from the landing page and designer.
The responsive landing page is based on the structure and visual language of Optimus UI. It includes:
- A compact responsive topbar, project announcement, and direct designer action
- A live analytics dashboard that responds to the active PrimeNG theme
- Mobile sample switching for responsive product previews
- An honest capability overview focused on the Design Editor, Accessibility, Responsive Preview, and Typed Theme Export
- A searchable, sortable, selectable, and paginated PrimeNG customer preview
- Direct access to the designer, changelog, source repository, and related resources
| Route | Purpose |
|---|---|
/ |
Landing page and live product previews |
/designer |
Theme creation, token editing, preview, import, sharing, and export |
/changelog |
Versioned release notes |
- Open
/designer, enter a theme name, and select Aura, Material, Lara, or Nora. - Edit primitive, semantic, component, custom, or settings tokens in the left panel.
- Use the preview navigation to inspect both individual PrimeNG components and complete screens.
- Select Apply to apply the current preset to the full designer.
- Select Download to copy the shareable token or download the TypeScript preset.
- Restore the theme later by importing the token or opening
/designer?theme=<token>.
- Angular 21 standalone components, signals, and OnPush change detection
- PrimeNG 21 and
@primeuix/themes - Tailwind CSS 4
- Chart.js
- Vitest and jsdom
- Node.js
^20.19.0,^22.12.0, or>=24.0.0 - npm 11
npm install
npm startThe development server is available at http://localhost:4200.
# Run the full unit test suite once
npm test -- --watch=false
# Build the production application
npm run buildThe designer has dedicated coverage for theme creation, imports, editor tabs, token updates, preview blocks, settings, applying presets, URL sharing, and exports.
src/app/
├── features/
│ ├── landing/ # Optimus-style landing page and live previews
│ │ ├── components/ # Dashboard, customer table, and theme controls
│ │ └── services/ # Landing-page theme state
│ ├── designer/ # Visual theme editor
│ │ ├── blocks/ # Complete preview screens
│ │ ├── components/ # Editor tabs, fields, settings, preview, and export UI
│ │ └── services/ # Theme state, import, sharing, apply, and export logic
│ └── changelog/ # Versioned release notes
├── app.routes.ts
└── theme-presets.ts
The in-app changelog documents user-facing changes. The current landing-page rebuild and designer validation are recorded in version 1.5.0.
Portions of the landing-page structure, styles, sample data, and assets are adapted from openng-org/optimus-ui under the MIT License. See THIRD_PARTY_NOTICES.md for the complete notice.