Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nalgeon/codapi-js
Interactive code examples for documentation, education and fun.
https://github.com/nalgeon/codapi-js
code-playground interactive-code interactive-snippets javascript playground sandbox snippets wasi
Last synced: 3 months ago
JSON representation
Interactive code examples for documentation, education and fun.
- Host: GitHub
- URL: https://github.com/nalgeon/codapi-js
- Owner: nalgeon
- License: mit
- Created: 2023-08-16T17:31:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-08T04:42:16.000Z (3 months ago)
- Last Synced: 2024-10-28T15:53:07.809Z (3 months ago)
- Topics: code-playground, interactive-code, interactive-snippets, javascript, playground, sandbox, snippets, wasi
- Language: JavaScript
- Homepage: https://codapi.org
- Size: 156 KB
- Stars: 493
- Watchers: 4
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - nalgeon/codapi-js - Interactive code examples for documentation, education and fun. (JavaScript)
README
# Interactive code examples
_for documentation, education and fun_ 🎉
Embed interactive code snippets directly into your product documentation, online course or blog post.
```
┌───────────────────────────────┐
│ def greet(name): │
│ print(f"Hello, {name}!") │
│ │
│ greet("World") │
└───────────────────────────────┘
Run ► Edit ✓ Done
┌───────────────────────────────┐
│ Hello, World! │
└───────────────────────────────┘
```
Highlights:
- Automatically converts static code examples into mini-playgrounds.
- Lightweight and easy to integrate.
- Sandboxes for any programming language, database, or software.
- Open source. Uses the permissive Apache-2.0 license.
For an introduction to Codapi, see this post: [Interactive code examples for fun and profit](https://antonz.org/code-examples/).
## Installation
Install with `npm`:
```
npm install @antonz/codapi
```
Or use a CDN:
```html
```
Optional styles:
```html
```
## Usage
See the guide that best fits your use case:
- [HTML/Markdown](docs/html.md)
- [Docusaurus](docs/docusaurus.md)
- [Docsify](docs/docsify.md)
- [WordPress](docs/wordpress.md)
- [Notion](docs/notion.md)
- [Dev.to/Medium/Substack/Newsletter](docs/code-links.md) (or other platforms that do not support JavaScript embeds)
You'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).
## Advanced features
Codapi offers a number of features that go beyond simple code playgrounds:
- [Output modes](docs/output-modes.md) for displaying images, HTML fragments and interactive DOM.
- [Templates](docs/templates.md) for hiding parts of the code behind the scenes.
- [Multi-file](docs/files.md) playgrounds.
- [Custom actions](docs/custom-actions.md).
- [Code cells](docs/code-cells.md) for a Jupyter notebook-like experience.
## In-browser playgrounds
Most playgrounds (like Go or MongoDB) run code on the Codapi server.
But there are some playgrounds that work completely in the browser, no Codapi server required:
- [JavaScript](docs/browser-only.md#javascript)
- [Fetch](docs/browser-only.md#fetch)
- [Lua](docs/browser-only.md#lua)
- [PHP](docs/browser-only.md#php)
- [PostgreSQL](docs/browser-only.md#postgresql)
- [Python](docs/browser-only.md#python)
- [Ruby](docs/browser-only.md#ruby)
- [SQLite](docs/browser-only.md#sqlite)
## Styling
The widget is unstyled by default. Use `snippet.css` for some basic styling or add your own instead.
Here is the widget structure:
```html
Run
Edit
✓ Done
Hello, World!
```
`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`).
## Support
Codapi is mostly a [one-man](https://antonz.org/) project, not backed by a VC fund or anything.
If you find Codapi useful, please star it on GitHub and spread the word among your peers. It really helps to move the project forward.
★ [Subscribe](https://antonz.org/subscribe/) to stay on top of new features.