Powerful development tools for theme creation and debugging
A comprehensive suite of tools to inspect, preview, compare, and edit themes. Build better themes faster with real-time feedback and validation.
npm install @shohojdhara/atomiximport {
ThemeInspector,
ThemePreview,
ThemeComparator,
ThemeLiveEditor
} from '@shohojdhara/atomix/theme/devtools';Deep inspection and validation of theme structure, CSS variables, and accessibility issues.
Learn more →Live preview of themes with sample components, color palettes, and typography scales.
Learn more →Side-by-side comparison of two themes with difference highlighting and statistics.
Learn more →Real-time theme editing with visual and JSON editors, instant preview, and export capabilities.
Learn more →Command-line interface for theme validation, inspection, comparison, and export.
Learn more →Create a comprehensive theme development dashboard:
1import {
2 ThemeInspector,
3 ThemePreview,
4 ThemeComparator,
5 ThemeLiveEditor
6} from '@shohojdhara/atomix/theme/devtools';
7import { createTheme } from '@shohojdhara/atomix/theme';
8import { useState } from 'react';
9
10function ThemeDashboard() {
11 const [currentTheme, setCurrentTheme] = useState(
12 createTheme({
13 name: 'My Theme',
14 palette: {
15 primary: { main: '#7AFFD7' },
16 },
17 })
18 );
19
20 return (
21 <div className="theme-dashboard">
22 {/* Live Editor */}
23 <section>
24 <h2>Edit Theme</h2>
25 <ThemeLiveEditor
26 initialTheme={currentTheme}
27 onChange={setCurrentTheme}
28 />
29 </section>
30
31 {/* Inspector */}
32 <section>
33 <h2>Inspect Theme</h2>
34 <ThemeInspector
35 theme={currentTheme}
36 showValidation={true}
37 showCSSVariables={true}
38 />
39 </section>
40
41 {/* Preview */}
42 <section>
43 <h2>Preview Theme</h2>
44 <ThemePreview
45 theme={currentTheme}
46 showPalette={true}
47 showTypography={true}
48 />
49 </section>
50 </div>
51 );
52}Add theme preview to your Storybook:
1// .storybook/preview.tsx
2import { ThemePreview } from '@shohojdhara/atomix/theme/devtools';
3
4export const decorators = [
5 (Story, context) => {
6 const theme = context.globals.theme;
7
8 return (
9 <ThemePreview theme={theme}>
10 <Story />
11 </ThemePreview>
12 );
13 },
14];Explore each devtools component in detail: