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:
For an introduction to Codapi, see this post: Interactive code examples for fun and profit.
Install with npm
:
npm install @antonz/codapi
Or use a CDN:
<script src="https://unpkg.com/@antonz/codapi@0.19.7/dist/snippet.js"></script>
Optional styles:
<link rel="stylesheet" href="https://unpkg.com/@antonz/codapi@0.19.7/dist/snippet.css" />
See the guide that best fits your use case:
You'll also need a working Codapi server, either cloud-based at codapi.org or self-hosted. Unless you are using an in-browser playground (see below).
Codapi offers a number of features that go beyond simple code 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:
The widget is unstyled by default. Use snippet.css
for some basic styling or add your own instead.
Here is the widget structure:
<codapi-snippet sandbox="python" editor="basic">
<codapi-toolbar>
<button>Run</button>
<a href="#edit">Edit</a>
<codapi-status> ✓ Done </codapi-status>
</codapi-toolbar>
<codapi-output>
<pre><code>Hello, World!</code></pre>
</codapi-output>
</codapi-snippet>
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
).
Codapi is mostly a one-man project, not backed by a VC fund or anything.
If you find Codapi useful, please consider sponsoring it on GitHub. It really helps to move the project forward.
♥ Become a sponsor to support Codapi.
★ Subscribe to stay on top of new features.