open-index/open-npm huggingface dataset:
npm package: @json-render/codegen
Description: Utilities for generating code from json-render UI trees
Latest version: 0.17.0

# @json-render/codegen

Utilities for generating code from json-render UI trees.

This package provides framework-agnostic utilities for building code generators. Use these utilities to create custom code exporters for your specific framework (Next.js, Remix, etc.).

## Installation

```bash
npm install @json-render/codegen
# or
pnpm add @json-render/codegen
```

## Utilities

### Tree Traversal

```typescript
import { traverseSpec, collectUsedComponents, collectStatePaths, collectActions } from '@json-render/codegen';

// Walk the spec depth-first
traverseSpec(spec, (element, key, depth, parent) => {
  console.log(`${' '.repeat(depth * 2)}${key}: ${element.type}`);
});

// Get all component types used
const components = collectUsedComponents(spec);
// Set { 'Card', 'Metric', 'Button' }

// Get all state paths referenced
const statePaths = collectStatePaths(spec);
// Set { 'analytics/revenue', 'user/name' }

// Get all action names
const actions = collectActions(spec);
// Set { 'submit_form', 'refresh_data' }
```

### Serialization

```typescript
import { serializePropValue, serializeProps, escapeString } from '@json-render/codegen';

// Serialize a single value
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }

serializePropValue(42);
// { value: '42', needsBraces: true }

serializePropValue({ $state: '/user/name' });
// { value: '{ $state: "/user/name" }', needsBraces: true }

// Serialize props for JSX
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'
```

### Types

```typescript
import type { GeneratedFile, CodeGenerator } from '@json-render/codegen';

// Implement your own code generator
const myGenerator: CodeGenerator = {
  generate(spec) {
    return [
      { path: 'package.json', content: '...' },
      { path: 'app/page.tsx', content: '...' },
    ];
  }
};
```

## Building a Custom Generator

See the `examples/dashboard` for a complete example of building a Next.js code generator using these utilities.

```typescript
import { 
  collectUsedComponents, 
  collectStatePaths,
  traverseSpec,
  serializeProps,
  type GeneratedFile 
} from '@json-render/codegen';
import type { Spec } from '@json-render/core';

export function generateNextJSProject(spec: Spec): GeneratedFile[] {
  const files: GeneratedFile[] = [];
  const components = collectUsedComponents(spec);
  
  // Generate package.json
  files.push({
    path: 'package.json',
    content: JSON.stringify({
      name: 'my-generated-app',
      dependencies: {
        next: '^14.0.0',
        react: '^18.0.0',
      }
    }, null, 2)
  });
  
  // Generate component files...
  // Generate main page...
  
  return files;
}
```

## License

Apache-2.0
npm package: @json-render/jotai
Description: Jotai adapter for json-render StateStore
Latest version: 0.17.0

# @json-render/jotai

Jotai adapter for json-render's `StateStore` interface. Wire a Jotai atom as the state backend for json-render.

## Installation

```bash
npm install @json-render/jotai @json-render/core @json-render/react jotai
```

## Usage

```ts
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";

// 1. Create an atom that holds the json-render state
const uiAtom = atom<Record<string, unknown>>({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = jotaiStateStore({ atom: uiAtom });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through Jotai */}
</StateProvider>
```

### With a shared Jotai store

If your app already uses a Jotai `<Provider>` with a custom store, pass it so both json-render and your components share the same state:

```ts
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";

const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });

const store = jotaiStateStore({ atom: uiAtom, store: jStore });

<JotaiProvider store={jStore}>
  <StateProvider store={store}>
    {/* Both json-render and useAtom() see the same state */}
  </StateProvider>
</JotaiProvider>
```

## API

### `jotaiStateStore(options)`

Creates a `StateStore` backed by a Jotai atom.

#### Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `atom` | `WritableAtom<StateModel, [StateModel], void>` | Yes | A writable atom holding the state model |
| `store` | Jotai `Store` | No | The Jotai store instance. Defaults to a new store created internally. Pass your own to share state with `<Provider>`. |
npm package: @json-render/react-three-fiber
Description: React Three Fiber renderer for @json-render/core. JSON becomes 3D scenes.
Latest version: 0.17.0

# @json-render/react-three-fiber

React Three Fiber renderer for [`@json-render/core`](https://json-render.dev). JSON becomes 3D scenes.

19 built-in components for meshes, lights, models, environments, text, cameras, and controls.

## Installation

```bash
npm install @json-render/react-three-fiber @json-render/core @json-render/react @react-three/fiber @react-three/drei three zod
```

## Usage

```tsx
import { defineCatalog } from "@json-render/core";
import { schema, defineRegistry } from "@json-render/react";
import {
  threeComponentDefinitions,
  threeComponents,
  ThreeCanvas,
} from "@json-render/react-three-fiber";

// Build catalog with 3D components
const catalog = defineCatalog(schema, {
  components: {
    Box: threeComponentDefinitions.Box,
    Sphere: threeComponentDefinitions.Sphere,
    AmbientLight: threeComponentDefinitions.AmbientLight,
    DirectionalLight: threeComponentDefinitions.DirectionalLight,
    OrbitControls: threeComponentDefinitions.OrbitControls,
  },
  actions: {},
});

// Register implementations
const { registry } = defineRegistry(catalog, {
  components: {
    Box: threeComponents.Box,
    Sphere: threeComponents.Sphere,
    AmbientLight: threeComponents.AmbientLight,
    DirectionalLight: threeComponents.DirectionalLight,
    OrbitControls: threeComponents.OrbitControls,
  },
});

// Render
<ThreeCanvas
  spec={spec}
  registry={registry}
  shadows
  camera={{ position: [5, 5, 5], fov: 50 }}
  style={{ width: "100%", height: "100vh" }}
/>;
```

## Components

**Primitives:** Box, Sphere, Cylinder, Cone, Torus, Plane, Capsule

**Lights:** AmbientLight, DirectionalLight, PointLight, SpotLight

**Container:** Group

**Model:** Model (GLTF/GLB)

**Environment:** Environment, Fog, GridHelper

**Text:** Text3D, ExtrudedText

**Camera/Controls:** PerspectiveCamera, OrbitControls

## Docs

Full API reference: [json-render.dev/docs/api/react-three-fiber](https://json-render.dev/docs/api/react-three-fiber)
npm package: @json-render/redux
Description: Redux adapter for json-render StateStore
Latest version: 0.17.0

# @json-render/redux

Redux adapter for json-render's `StateStore` interface. Wire a Redux store (or Redux Toolkit slice) as the state backend for json-render.

## Installation

```bash
npm install @json-render/redux @json-render/core @json-render/react redux
# or with Redux Toolkit (recommended):
npm install @json-render/redux @json-render/core @json-render/react @reduxjs/toolkit
```

## Usage

```ts
import { configureStore, createSlice } from "@reduxjs/toolkit";
import { reduxStateStore } from "@json-render/redux";
import { StateProvider } from "@json-render/react";

// 1. Define a slice for json-render state
const uiSlice = createSlice({
  name: "ui",
  initialState: { count: 0 } as Record<string, unknown>,
  reducers: {
    replaceUiState: (_state, action) => action.payload,
  },
});

// 2. Create the Redux store
const reduxStore = configureStore({
  reducer: { ui: uiSlice.reducer },
});

// 3. Create the json-render StateStore adapter
const store = reduxStateStore({
  store: reduxStore,
  selector: (state) => state.ui,
  dispatch: (next, s) => s.dispatch(uiSlice.actions.replaceUiState(next)),
});

// 4. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through Redux */}
</StateProvider>
```

## API

### `reduxStateStore(options)`

Creates a `StateStore` backed by a Redux store.

#### Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `store` | `Store` | Yes | The Redux store instance |
| `selector` | `(state) => StateModel` | Yes | Select the json-render slice from the Redux state tree. For a simple store where the entire state is the model, use `(s) => s`. |
| `dispatch` | `(nextState, store) => void` | Yes | Dispatch an action that replaces the selected slice with the next state |

The `dispatch` callback receives the full next state model and the Redux store, so you can dispatch any action shape your reducers expect.
npm package: @json-render/shadcn-svelte
Description: shadcn-svelte component library for @json-render/svelte. JSON becomes beautiful Tailwind-styled Svelte components.
Latest version: 0.17.0

# @json-render/shadcn-svelte

Pre-built [shadcn-svelte](https://www.shadcn-svelte.com/) components for json-render. Drop-in catalog definitions and Svelte implementations for 36 components built on Svelte 5 + Tailwind CSS.

## Installation

```bash
npm install @json-render/shadcn-svelte @json-render/core @json-render/svelte zod
```

## Quick Start

### 1. Create a Catalog

```ts
import { schema } from "@json-render/svelte/schema";
import { shadcnComponentDefinitions } from "@json-render/shadcn-svelte/catalog";

const catalog = schema.createCatalog({
  components: {
    Card: shadcnComponentDefinitions.Card,
    Stack: shadcnComponentDefinitions.Stack,
    Heading: shadcnComponentDefinitions.Heading,
    Button: shadcnComponentDefinitions.Button,
    Input: shadcnComponentDefinitions.Input,
  },
  actions: {},
});
```

### 2. Create a Registry

```ts
import { defineRegistry } from "@json-render/svelte";
import { shadcnComponents } from "@json-render/shadcn-svelte";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Stack: shadcnComponents.Stack,
    Heading: shadcnComponents.Heading,
    Button: shadcnComponents.Button,
    Input: shadcnComponents.Input,
  },
});
```

### 3. Render

```svelte
<script lang="ts">
  import { Renderer, JsonUIProvider } from "@json-render/svelte";

  export let spec;
  export let registry;
</script>

<JsonUIProvider initialState={spec?.state ?? {}}>
  <Renderer {spec} {registry} />
</JsonUIProvider>
```

## Exports

| Entry Point | Exports |
|-------------|---------|
| `@json-render/shadcn-svelte` | `shadcnComponents`, `shadcnComponentDefinitions` |
| `@json-render/shadcn-svelte/catalog` | `shadcnComponentDefinitions` |

The `/catalog` entrypoint contains only Zod schemas (no renderer dependency), so it can be used in server-side code for prompt generation.
npm package: @json-render/xstate
Description: XState Store adapter for json-render StateStore
Latest version: 0.17.0

# @json-render/xstate

[XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for json-render.

## Installation

```bash
npm install @json-render/xstate @json-render/core @json-render/react @xstate/store
```

> [!NOTE]
> This adapter requires `@xstate/store` v3+.

## Usage

```ts
import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";

// 1. Create an atom
const uiAtom = createAtom({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through @xstate/store */}
</StateProvider>
```

## API

### `xstateStoreStateStore(options)`

Creates a `StateStore` backed by an `@xstate/store` atom.

#### Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `atom` | `Atom<StateModel>` | Yes | An `@xstate/store` atom (from `createAtom`) holding the json-render state model |
npm package: @json-render/xstate-store
Description: XState Store adapter for json-render StateStore
Latest version: 0.0.0

# @json-render/xstate-store

[XState Store](https://stately.ai/docs/xstate-store) adapter for json-render's `StateStore` interface. Wire an `@xstate/store` atom as the state backend for json-render.

## Installation

```bash
npm install @json-render/xstate-store @json-render/core @json-render/react @xstate/store
```

> [!NOTE]
> This adapter requires `@xstate/store` v3+.

## Usage

```ts
import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate-store";
import { StateProvider } from "@json-render/react";

// 1. Create an atom
const uiAtom = createAtom({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through @xstate/store */}
</StateProvider>
```

## API

### `xstateStoreStateStore(options)`

Creates a `StateStore` backed by an `@xstate/store` atom.

#### Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `atom` | `Atom<StateModel>` | Yes | An `@xstate/store` atom (from `createAtom`) holding the json-render state model |
npm package: @json-render/zustand
Description: Zustand adapter for json-render StateStore
Latest version: 0.17.0

# @json-render/zustand

Zustand adapter for json-render's `StateStore` interface. Wire a Zustand vanilla store as the state backend for json-render.

## Installation

```bash
npm install @json-render/zustand @json-render/core @json-render/react zustand
```

> **Note:** This adapter requires Zustand v5+. Zustand v4 is not supported due to
> breaking API changes in the vanilla store interface (`createStore`, `StoreApi`).

## Usage

```ts
import { createStore } from "zustand/vanilla";
import { zustandStateStore } from "@json-render/zustand";
import { StateProvider } from "@json-render/react";

// 1. Create a Zustand vanilla store
const bearStore = createStore(() => ({
  count: 0,
  name: "Bear",
}));

// 2. Create the json-render StateStore adapter
const store = zustandStateStore({ store: bearStore });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through Zustand */}
</StateProvider>
```

### With a nested slice

```ts
const appStore = createStore(() => ({
  ui: { count: 0 },
  auth: { token: null },
}));

const store = zustandStateStore({
  store: appStore,
  selector: (s) => s.ui,
  updater: (next, s) => s.setState({ ui: next }),
});
```

## API

### `zustandStateStore(options)`

Creates a `StateStore` backed by a Zustand store.

#### Options

| Option | Type | Required | Description |
|--------|------|----------|-------------|
| `store` | `StoreApi<S>` | Yes | A Zustand vanilla store (from `createStore` in `zustand/vanilla`) |
| `selector` | `(state) => StateModel` | No | Select the json-render slice from the store state. Defaults to the entire state. |
| `updater` | `(nextState, store) => void` | No | Apply the next state back to the Zustand store. Defaults to a shallow merge so that keys outside the json-render model are preserved. Override for nested slices, or pass `(next, s) => s.setState(next, true)` for full replacement. |
npm package: @json-rpc-specification/meta-schema
Description: JSON Schemas for JSON-RPC. Generated types in multiple languages
Author: Zachary Belford
Latest version: 1.0.7

# JSON RPC JSON Schemas

This repo contains the JSON Schema meta-schema that corresponds to the various JSON-RPC objects.

From these JSON Schema, types for various languages are generated.

meta schema is hosted here: https://meta.jsonrpc.net/

## Installing

### Typescript

`npm install --save @json-rpc-specification/meta-schema`

### Golang

`go get github.com/json-rpc-specification/meta-schema`


### Rust

`cargo install jsonrpctypes`

## Using

### Typescript
```typescript
import { JSONRPCRequest } from "@json-rpc-specification/meta-schema"
```