src/: App code. Key areas:components/(UI + layout),features/json/(JSON editor, tree, table views),store/(Zustand stores),utils/(parsers, generators),lib/utils.ts(helpers likecn).public/: Static assets served as-is.index.html: Vite entry; Tailwind hooks into this.dist/: Build output (ignored). Alias@→./src(seevite.config.js).
npm run dev: Start Vite dev server with hot reload.npm run build: Production build todist/.npm run preview: Serve the production build locally.npm run lint: Lint JavaScript/JSX using ESLint.
Example:
npm install
npm run dev- Indentation: 2 spaces; semicolons are omitted as in repo.
- React: Function components; files named
PascalCase.tsx/.jsxincomponents/andfeatures/. - State: Zustand stores named
useXxxStoreinsrc/store/. - Utilities:
camelCase.ts/jsinsrc/utils/; shared helpers insrc/lib/. - CSS: Tailwind CSS (class composition via
cnfromlib/utils.ts). - Linting: ESLint (JS/JSX rules via
eslint.config.js). Keep TS strict pertsconfig.json.
- Tests are not set up yet. If adding tests, prefer Vitest + Testing Library.
- Place tests as
__tests__/*.test.ts(x)or alongside modules as*.test.ts(x). - Aim for component tests of views in
features/json/and store logic insrc/store/.
- Keep commits focused; write imperative subjects (e.g., "Add tree view selection state").
- Prefer Conventional Commits for scope clarity (feat, fix, refactor, docs, chore).
- PRs: Include a concise description, linked issue (if any), and screenshots/GIFs for UI changes.
- Run
npm run lintand ensurenpm run buildsucceeds before opening a PR.
- This is a client-only app; do not commit secrets or private JSON samples.
- Large sample JSON should be pasted at runtime; avoid storing PII in
public/orsrc/assets/. - Respect path alias
@/...for imports and avoid relative chain imports (e.g.,../../..).