{"id":13456275,"url":"https://github.com/nalgeon/codapi-js","last_synced_at":"2025-06-17T11:13:20.666Z","repository":{"id":189626198,"uuid":"679372192","full_name":"nalgeon/codapi-js","owner":"nalgeon","description":"Interactive code examples for documentation, education and fun.","archived":false,"fork":false,"pushed_at":"2024-12-21T11:36:55.000Z","size":181,"stargazers_count":565,"open_issues_count":1,"forks_count":33,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-12T12:54:32.075Z","etag":null,"topics":["code-playground","interactive-code","interactive-snippets","javascript","playground","sandbox","snippets","wasi"],"latest_commit_sha":null,"homepage":"https://codapi.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nalgeon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2023-08-16T17:31:51.000Z","updated_at":"2025-05-24T11:49:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b791267-1f1c-4125-adaa-6b754af3ca5b","html_url":"https://github.com/nalgeon/codapi-js","commit_stats":null,"previous_names":["nalgeon/codapi-js"],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/nalgeon/codapi-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nalgeon%2Fcodapi-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nalgeon%2Fcodapi-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nalgeon%2Fcodapi-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nalgeon%2Fcodapi-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nalgeon","download_url":"https://codeload.github.com/nalgeon/codapi-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nalgeon%2Fcodapi-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260347083,"owners_count":22995161,"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":["code-playground","interactive-code","interactive-snippets","javascript","playground","sandbox","snippets","wasi"],"created_at":"2024-07-31T08:01:19.085Z","updated_at":"2025-06-17T11:13:15.657Z","avatar_url":"https://github.com/nalgeon.png","language":"JavaScript","readme":"# Interactive code examples\n\n_for documentation, education and fun_ 🎉\n\nEmbed interactive code snippets directly into your product documentation, online course or blog post.\n\n```\n┌───────────────────────────────┐\n│ def greet(name):              │\n│   print(f\"Hello, {name}!\")    │\n│                               │\n│ greet(\"World\")                │\n└───────────────────────────────┘\n  Run ►  Edit  ✓ Done\n┌───────────────────────────────┐\n│ Hello, World!                 │\n└───────────────────────────────┘\n```\n\nHighlights:\n\n-   Automatically converts static code examples into mini-playgrounds.\n-   Lightweight and easy to integrate.\n-   Sandboxes for any programming language, database, or software.\n-   Open source. Uses the permissive Apache-2.0 license.\n\nFor an introduction to Codapi, see this post: [Interactive code examples for fun and profit](https://antonz.org/code-examples/).\n\n## Installation\n\nInstall with `npm`:\n\n```\nnpm install @antonz/codapi\n```\n\nOr use a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/@antonz/codapi@0.19.10/dist/snippet.js\"\u003e\u003c/script\u003e\n```\n\nOptional styles:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@antonz/codapi@0.19.10/dist/snippet.css\" /\u003e\n```\n\n## Usage\n\nSee the guide that best fits your use case:\n\n-   [HTML/Markdown](docs/html.md)\n-   [Docusaurus](docs/docusaurus.md)\n-   [Docsify](docs/docsify.md)\n-   [WordPress](docs/wordpress.md)\n-   [Notion](docs/notion.md)\n-   [Dev.to/Medium/Substack/Newsletter](docs/code-links.md) (or other platforms that do not support JavaScript embeds)\n\nYou'll also need a working Codapi server, either cloud-based at [codapi.org](https://codapi.org/) or [self-hosted](https://github.com/nalgeon/codapi). Unless you are using an in-browser playground (see below).\n\n## Advanced features\n\nCodapi offers a number of features that go beyond simple code playgrounds:\n\n-   [Output modes](docs/output-modes.md) for displaying images, HTML fragments and interactive DOM.\n-   [Templates](docs/templates.md) for hiding parts of the code behind the scenes.\n-   [Multi-file](docs/files.md) playgrounds.\n-   [Custom actions](docs/custom-actions.md).\n-   [Code cells](docs/code-cells.md) for a Jupyter notebook-like experience.\n\n## In-browser playgrounds\n\nMost playgrounds (like Go or MongoDB) run code on the Codapi server.\n\nBut there are some playgrounds that work completely in the browser, no Codapi server required:\n\n-   [JavaScript](docs/browser-only.md#javascript)\n-   [Fetch](docs/browser-only.md#fetch)\n-   [Lua](docs/browser-only.md#lua)\n-   [PHP](docs/browser-only.md#php)\n-   [PostgreSQL](docs/browser-only.md#postgresql)\n-   [Python](docs/browser-only.md#python)\n-   [Ruby](docs/browser-only.md#ruby)\n-   [SQLite](docs/browser-only.md#sqlite)\n\n## Styling\n\nThe widget is unstyled by default. Use `snippet.css` for some basic styling or add your own instead.\n\nHere is the widget structure:\n\n```html\n\u003ccodapi-snippet sandbox=\"python\" editor=\"basic\"\u003e\n    \u003ccodapi-toolbar\u003e\n        \u003cbutton\u003eRun\u003c/button\u003e\n        \u003ca href=\"#edit\"\u003eEdit\u003c/a\u003e\n        \u003ccodapi-status\u003e ✓ Done \u003c/codapi-status\u003e\n    \u003c/codapi-toolbar\u003e\n    \u003ccodapi-output\u003e\n        \u003cpre\u003e\u003ccode\u003eHello, World!\u003c/code\u003e\u003c/pre\u003e\n    \u003c/codapi-output\u003e\n\u003c/codapi-snippet\u003e\n```\n\n`codapi-snippet` is the top-level element. It contains the the toolbar (`codapi-toolbar`) and the code execution output (`codapi-output`). The toolbar contains a Run `button`, one or more action buttons (`a`) and a status bar (`codapi-status`).\n\n## Support\n\nCodapi is mostly a [one-man](https://antonz.org/) project, not backed by a VC fund or anything.\n\nIf you find Codapi useful, please star it on GitHub and spread the word among your peers. It really helps to move the project forward.\n\n★ [Subscribe](https://antonz.org/subscribe/) to stay on top of new features.\n","funding_links":[],"categories":["JavaScript","javascript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnalgeon%2Fcodapi-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnalgeon%2Fcodapi-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnalgeon%2Fcodapi-js/lists"}