jotai
installsforks
How to install jotai?
vercel-labs/json-render/jotai
$npx -y skills add vercel-labs/json-render --skill jotaiJotai adapter for json-render's StateStore interface. Use when integrating json-render with Jotai for state management via @json-render/jotai.
SKILL.md
| 1 | # @json-render/jotai |
| 2 | |
| 3 | Jotai adapter for json-render's `StateStore` interface. Wire a Jotai atom as the state backend for json-render. |
| 4 | |
| 5 | ## Installation |
| 6 | |
| 7 | ```bash |
| 8 | npm install @json-render/jotai @json-render/core @json-render/react jotai |
| 9 | ``` |
| 10 | |
| 11 | ## Usage |
| 12 | |
| 13 | ```tsx |
| 14 | import { atom } from "jotai"; |
| 15 | import { jotaiStateStore } from "@json-render/jotai"; |
| 16 | import { StateProvider } from "@json-render/react"; |
| 17 | |
| 18 | // 1. Create an atom that holds the json-render state |
| 19 | const uiAtom = atom<Record<string, unknown>>({ count: 0 }); |
| 20 | |
| 21 | // 2. Create the json-render StateStore adapter |
| 22 | const store = jotaiStateStore({ atom: uiAtom }); |
| 23 | |
| 24 | // 3. Use it |
| 25 | <StateProvider store={store}> |
| 26 | {/* json-render reads/writes go through Jotai */} |
| 27 | </StateProvider> |
| 28 | ``` |
| 29 | |
| 30 | ### With a Shared Jotai Store |
| 31 | |
| 32 | When your app already uses a Jotai `<Provider>` with a custom store, pass it so both json-render and your components share the same state: |
| 33 | |
| 34 | ```tsx |
| 35 | import { atom, createStore } from "jotai"; |
| 36 | import { Provider as JotaiProvider } from "jotai/react"; |
| 37 | import { jotaiStateStore } from "@json-render/jotai"; |
| 38 | import { StateProvider } from "@json-render/react"; |
| 39 | |
| 40 | const jStore = createStore(); |
| 41 | const uiAtom = atom<Record<string, unknown>>({ count: 0 }); |
| 42 | |
| 43 | const store = jotaiStateStore({ atom: uiAtom, store: jStore }); |
| 44 | |
| 45 | <JotaiProvider store={jStore}> |
| 46 | <StateProvider store={store}> |
| 47 | {/* Both json-render and useAtom() see the same state */} |
| 48 | </StateProvider> |
| 49 | </JotaiProvider> |
| 50 | ``` |
| 51 | |
| 52 | ## API |
| 53 | |
| 54 | ### `jotaiStateStore(options)` |
| 55 | |
| 56 | Creates a `StateStore` backed by a Jotai atom. |
| 57 | |
| 58 | | Option | Type | Required | Description | |
| 59 | |--------|------|----------|-------------| |
| 60 | | `atom` | `WritableAtom<StateModel, [StateModel], void>` | Yes | A writable atom holding the state model | |
| 61 | | `store` | Jotai `Store` | No | The Jotai store instance. Defaults to a new store. Pass your own to share state with `<Provider>`. | |
People who liked this also viewed
6 picksType
- lark-drive飞书云空间（云盘/云存储）：管理 Drive 文件和文件夹，包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、评论/权限/订阅、标题、版本、飞书文档密级标签（secure labels）和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题，或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sSkillsJul 2026
- lark-sharedUse for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handlingSkillsJul 2026
- lark-whiteboard飞书画板：查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用多种格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板时使用此 skill。不负责：飞书云文档内容编辑（lark-doc）、文档内嵌电子表格/Base（lark-sheets / lark-base）。SkillsJul 2026
- lark-task飞书任务：管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。SkillsJul 2026
- lark-attendance飞书考勤打卡：查询自己的考勤打卡记录SkillsJul 2026
- lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要SkillsJul 2026
