Fixes a React runtime error where `useRef` was null due to multiple React instances being bundled.
## Changes Made
- **Vite configuration**: Added `resolve.dedupe` for `react` and `react-dom` in `examples/mcp/vite.config.ts` to ensure only one instance of React is used during bundling
- **React version constraints**: Changed from exact versions (`19.2.3`) to flexible ranges (`^19.0.0`) in `examples/mcp/package.json` to improve compatibility
- **Build entry point**: Added new `build-app-html-entry.ts` file and updated `tsup.config.ts` to include it as a build target
- **Package exports**: Added `./build-app-html` export path in `packages/mcp/package.json`
- **Minor fixes**: Updated Next.js type reference path in stripe-app example
The root cause was React being duplicated in the bundle, causing hooks like `useRef` to fail when components tried to access React's internal state from the wrong instance. The `dedupe` configuration ensures Vite resolves all React imports to the same module instance.
Fixes#190
* add react-email workspace dependencies
* add react-email package
* add react-email example with Vercel Invite, Stripe Welcome and Nike Receipt
* add render tests for react-email package
* fix missing style prop on stripe-welcome logo Image
* add react email documentation
* add json render react email skill
* fix @internal/react-state alias in vitest config
Pre-existing issue: vitest could not resolve @internal/react-state,
causing 6 test suites in packages/react and packages/react-pdf to fail.
* fix PR review feedback
- fix tsconfig: remove rootDir, expand include for test imports
- fix render tests: add non-null assertions for noUncheckedIndexedAccess
- fix dev script: add portless to match other examples
- fix .env.example: correct comment from video to email generation
- fix docs: add blank line before heading in installation page
* merge latest
* fix: update tsconfig extends from @repo to @internal/typescript-config
* fixes
* fixes
---------
Co-authored-by: WManzoli <willmanzoli@gmail.com>
Co-authored-by: Chris Tate <chris@ctate.dev>
* image
* fixes
* fixes
* fix ci
* fix ci
* disable @next/next/no-img-element rule in ESLint configuration
* update route.ts to use path.join for font resolution and adjust next-env.d.ts import path
* feat: add @xstate/store integration using atoms
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: add README for @json-render/xstate-store
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* refactor: rename xstateStoreStateStore to xstateStore
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* README updates
* Keep naming convention
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
* external store adapter for state management
Introduces a `StateStore` interface that lets users plug in their own state management (Redux, Zustand, XState, etc.) instead of being locked into the internal `useState`-based store.
- Added `StateStore` interface and `createStateStore()` factory to `@json-render/core`
- `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode
- When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored)
- When `store` is omitted, everything works exactly as before (fully backward compatible)
- Applied across all platform packages: react, react-native, react-pdf
* improvements
* update docs
* improvements
* fixes
* fix CI
* add store adapters
* fixes
* fixes
* fixes
* fixes
* e2e tests
* improvements
* fixes
* fixes
* fixes
* fixes
* update lockfile for widened react peer deps
* fix dashboard build
* add rate limits
* fix lint
* better
generate prompt
update examples
* fixes
* fixes
* new api
* update docs
* fixes
* fixes
* generated prompt
* Add tests for catalog validation and prompt generation
- Test generateSystemPrompt with components, actions, custom rules
- Test new defineCatalog API from schema system
- Test catalog.prompt() method with custom rules
- Test catalog.validate() for valid and invalid specs
- Test catalog.zodSchema() for custom validation
- Test catalog.jsonSchema() for structured outputs
- Add tests for nested specs with children
- Add tests for rejecting invalid component types
* Fix lint: pass children as nested elements in renderer
Change from children={...} prop to nested children pattern
to satisfy react/no-children-prop rule.
* Fix lint errors in dashboard and web apps
- Disable react/prop-types in both eslint configs (TypeScript handles this)
- Allow styled-jsx 'jsx' property in dashboard
- Add DATABASE_URL to turbo env allowlist
- Remove unused drizzle-orm imports (and, sql)
- Suppress unused variable warnings where intentional
* Add server entry point for @json-render/remotion
The main package entry includes React components that require
client-side context (React.createContext). This causes build
failures when importing in server-side API routes.
Added `@json-render/remotion/server` entry point that exports
only schema and catalog definitions without React dependencies:
- schema, RemotionSchema, RemotionSpec
- standardComponentDefinitions, standardTransitionDefinitions
- standardEffectDefinitions
- Type exports for catalogs
Updated remotion example to import from /server in catalog.ts
* Make dashboard database connection lazy-initialized
The database connection threw an error at module load time if
DATABASE_URL was not set, causing builds to fail in CI where
the database is not available.
Changed to lazy initialization using a Proxy so the error only
occurs when the database is actually used at runtime, not at
build time.
* Fix previousSpec property name and lazy rate limiting
- Fix property name mismatch: playground now passes previousSpec
instead of previousTree to match what useUIStream hook expects
- Make rate limiting lazy-initialized to avoid runtime errors when
Redis env vars (KV_REST_API_URL, KV_REST_API_TOKEN) are not set
- Rate limiting gracefully becomes a no-op when Redis is unavailable
## Vercel Speed Insights Integration
Successfully implemented Vercel Speed Insights for the json-render project.
### Changes Made
#### 1. Installation
- Installed `@vercel/speed-insights@^1.3.1` using pnpm package manager
- Updated `apps/web/package.json` with the new dependency
- Updated `pnpm-lock.yaml` to reflect the new dependency
#### 2. Configuration
- **File Modified**: `apps/web/app/layout.tsx`
- Added import: `import { SpeedInsights } from "@vercel/speed-insights/next"`
- Added component: `<SpeedInsights />` in the body tag after the `<Analytics />` component
- This follows Next.js 13.5+ with App Router best practices
### Implementation Details
The project uses:
- **Next.js version**: 16.1.1 (with App Router)
- **Package manager**: pnpm (v9.0.0)
- **Router type**: App Router (`app/` directory)
Since the project uses Next.js 16.1.1 with App Router, the implementation uses:
- `@vercel/speed-insights/next` import (for Next.js 13.5+)
- Direct component placement in the root layout (no 'use client' directive needed)
- Positioned after the Analytics component in the body tag
### Testing
✓ Build completed successfully (all 4 workspace projects compiled)
✓ ESLint passed with no warnings or errors
✓ No TypeScript errors or type conflicts
✓ All dependencies properly installed
### Files Changed
1. `apps/web/package.json` - Added @vercel/speed-insights dependency
2. `apps/web/app/layout.tsx` - Added SpeedInsights component and import
3. `pnpm-lock.yaml` - Updated lock file with new dependency
The implementation is minimal, non-breaking, and follows the existing project patterns (similar to how @vercel/analytics is already integrated).
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Implemented Vercel Web Analytics for Next.js
Successfully installed and configured Vercel Web Analytics for the json-render project's web application.
## Changes Made:
### 1. Package Installation
- Installed `@vercel/analytics` (v1.6.1) using pnpm
- Updated apps/web/package.json with the new dependency
- Updated pnpm-lock.yaml to reflect the new dependency
### 2. Analytics Integration
- Modified `apps/web/app/layout.tsx` to import the Analytics component from '@vercel/analytics/next'
- Added the `<Analytics />` component inside the body tag, placed after the ThemeProvider div and before the closing body tag
- This configuration follows best practices for App Router projects
## Project Structure:
- Identified project uses App Router (app directory structure)
- Project uses pnpm as package manager
- Uses TypeScript (tsx files)
- Uses Next.js 16.1.1
## Verification:
✓ Build completed successfully - all 19 routes compiled without errors
✓ Linter passed with no warnings or errors (eslint --max-warnings 0)
✓ Dependencies properly installed and locked
✓ No existing code structure was broken
## Files Modified:
- apps/web/app/layout.tsx - Added Analytics import and component
- apps/web/package.json - Added @vercel/analytics dependency
- pnpm-lock.yaml - Updated lock file with new dependency
The Analytics component will now automatically collect web vitals and pageview data from the json-render application, enabling Vercel Web Analytics to track user interactions and performance metrics.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Chris Tate