{"id":24594286,"url":"https://github.com/freewheel/code-kitchen","last_synced_at":"2025-10-03T20:42:37.632Z","repository":{"id":43286774,"uuid":"466998877","full_name":"freewheel/code-kitchen","owner":"freewheel","description":"🧑‍🍳 A pure-static live-coding playground that is easy to be used in a closed source environment for React UI Libraries.","archived":false,"fork":false,"pushed_at":"2024-02-26T07:56:24.000Z","size":6346,"stargazers_count":116,"open_issues_count":12,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T10:42:14.467Z","etag":null,"topics":["esbuild","playground","react"],"latest_commit_sha":null,"homepage":"https://freewheel.github.io/code-kitchen/home","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/freewheel.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-03-07T08:05:41.000Z","updated_at":"2025-02-13T09:21:43.000Z","dependencies_parsed_at":"2024-02-26T06:46:04.933Z","dependency_job_id":null,"html_url":"https://github.com/freewheel/code-kitchen","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freewheel%2Fcode-kitchen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freewheel%2Fcode-kitchen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freewheel%2Fcode-kitchen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/freewheel%2Fcode-kitchen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/freewheel","download_url":"https://codeload.github.com/freewheel/code-kitchen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251711308,"owners_count":21631293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","playground","react"],"created_at":"2025-01-24T11:14:12.091Z","updated_at":"2025-10-03T20:42:37.549Z","avatar_url":"https://github.com/freewheel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Kitchen 🧑‍🍳\n\n**Code Kitchen** is a React live-coding playground which allows the developers to embed React component demos into a React UI library’s web documents.\n\n\u003ca href=\"http://npmjs.com/package/code-kitchen\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/code-kitchen\"\u003e\u003c/img\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/freewheel/code-kitchen/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/freewheel/code-kitchen\"\u003e\u003c/img\u003e\u003c/a\u003e\n[![CI](https://github.com/freewheel/code-kitchen/actions/workflows/ci.yml/badge.svg)](https://github.com/freewheel/code-kitchen/actions/workflows/ci.yml)\n\nCompared to other solutions, it supports the following features:\n\n- Private source code dependencies support 🔒\n- Multiple files in a single demo\n- CSS (CSS modules) and JSON files\n- A completely static solution without the need for a remote server 🔌\n- Type hints in the code editor\n\n## Demo 🎩\n\nCheck out the demo at https://freewheel.github.io/code-kitchen/home\n\n## Usage\n\nInstall with `npm install code-kitchen`.\n\nNote: due to the size of esbuild-wasm and monaco-editor, they are not bundled with this library. By default they are loaded via jsDelivr CDN. You can configure this by calling `setup` in the runtime.\n\nYou can checkout a minimum example at this [Code Sandbox](https://codesandbox.io/s/code-kitchen-example-0p5p6v).\n\n### Minimal setup\n\n```tsx\nimport * as React from \"react\";\nimport { Playground, setup } from \"code-kitchen\";\n\nimport * as privateLib from \"my-private-lib\";\n\nconst dependencies = {\n  react: React,\n  \"my-private-lib\": privateLib,\n};\n\nconst customRequire = (key: string) =\u003e {\n  const res = (dependencies as any)[key];\n\n  if (res) {\n    return res;\n  }\n\n  throw new Error(\"DEP: \" + key + \" not found\");\n};\n\n// Two files for the demo playground\nconst files = [\n  {\n    code: `\nimport { Button } from \"my-private-lib\";\nimport \"./styles.css\";\n\nexport default function Demo() {\n  return \u003cButton\u003eButton\u003c/Button\u003e;\n}\n  `,\n    filename: \"App.jsx\",\n  },\n  {\n    code: `button { width: 200px; }`,\n    filename: \"styles.css\",\n  },\n];\n\nexport default () =\u003e {\n  return \u003cPlayground initialFiles={files} require={customRequire} /\u003e;\n};\n```\n\n### With MDX\n\nMost of the time you may want to use Code Kitchen in a MDX document. You can checkout `docs/components/MDXPlayground.mdx` as a real-life example.\n\n### Add Intelligent type suggestion\n\nYou can access Monaco instance by `import { useMonaco } from \"code-kitchen\"`. Checkout `docs/components/use-init-monaco.ts` as a real-life example.\n\n## Project Structure\n\nThe project is a monorepo managed by pnpm.\n\n```\n├── docs # Documentation site\n│   ├── components\n│   │   └── MDXPlayground.tsx # configure Code Kitchen for MDX and how to load user-land types\n│   └── pages\n│       └── index.mdx # A real-life multi-file playground demo in MDX\n└── packages\n    ├── demo-lib # a private React UI library for demo purpose\n    └── src # ⭐ the core source code for Code Kitchen\n      ├── playground.tsx # the main playground component\n      ├── bundle.ts # the in-browser bundler implemented by [esbuild-wasm](https://esbuild.github.io/api/#running-in-the-browser)\n      ├── index.ts # the main library entry point\n      └── use-monaco.ts # monaco-editor loader that wrapped into a React hook\n```\n\n# Local Development\n\nThis library is developed with a typical Next.js [document site](https://freewheel.github.io/code-kitchen/home).\n\n## Prerequisites\n\n- Node.js\n- pnpm\n\n## Install and start\n\n```bash\n# Under the root of the repository\npnpm i\npnpm dev\n```\n\nNow you will be able to preview the document in `localhost:3000`\n\n# Q/A\n\n## How the in-browser bundler works?\n\nSee [this explanation](./docs/posts/how-it-works.mdx)\n\n## How to Contribution\n\nSee [Contributing Guide](./CONTRIBUTING.md)\n\n## Acknowledgements\n\nSee [Acknowledgements](./acknowledgement.md)\n\n# License\n\n[Apache-2.0](./LICENSE) by FreeWheel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreewheel%2Fcode-kitchen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffreewheel%2Fcode-kitchen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffreewheel%2Fcode-kitchen/lists"}