Build and share code snippets with Code Pens

Code Pens is a built-in scratch editor for HTML, CSS, and JavaScript with an instant live preview. Use it to prototype a layout, sketch a chart, test a CSS animation, or send a working demo to a teammate — all without leaving Navis Ops. When you’re ready to share, one click publishes the pen to a permanent public URL that anyone can open, no login required.

Getting started

Open Code Pens

Click Code Pens in the sidebar. If it isn’t pinned, find it under More.

Create a new pen

Click New Pen. The editor opens with an HTML field, a CSS field, and a live preview panel.

Write your code

Type in the HTML or CSS fields. The preview refreshes as you type — faster than a second. JavaScript goes inside <script> tags in your HTML field; there’s no separate JS tab.

Save

Saving is automatic. About a second after you stop typing, your changes are saved. You don’t need to click anything.

When your pen is ready, click Publish in the header, then Copy link. Paste the URL anywhere — no login is needed to view it.

What you can do

Live preview editor

HTML and CSS fields with an instant sandboxed preview that refreshes as you type.

CDN libraries

Load Chart.js, Alpine.js, Tailwind, or any CDN-hosted library at runtime.

Public sharing

Publish to a permanent URL that works for anyone without a Navis Ops account.

Social unfurling

Links unfurl with title and preview image in Slack, Discord, and Twitter.

Unpublish and republish

Take a pen offline without losing its URL — republish to bring the same link back.

Project linking

Attach a pen to a project so it shows up in the project’s Code Pens tab.

Editor

The editor has two fields: HTML and CSS. The live preview updates in real time as you type. What you can use in a pen:

Any valid HTML, including <canvas>, forms, modals, <video>, <audio>, and custom elements
CSS with custom properties, animations, transitions, and @media queries
JavaScript inside <script> tags in the HTML field — modern browser APIs, fetch, IntersectionObserver, requestAnimationFrame, and more
External libraries loaded from a CDN (unpkg, jsDelivr, esm.sh)

The preview runs in a sandboxed iframe. This keeps your pen isolated from your Navis Ops session — pen JavaScript cannot read your cookies, localStorage, or workspace data.

There is no separate JavaScript tab. Write your scripts inside <script> tags in the HTML field.

Using libraries

To use a library, add a <script> tag in your HTML field pointing to a CDN URL. No build step or package manager is needed.

<!-- Load Chart.js from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- Load Alpine.js -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

<!-- Load a CSS framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">

Any library available on unpkg, jsDelivr, or esm.sh works fine. Publishing a pen creates a permanent public URL at navisops.com/p/<slug>. Anyone with the link can view the pen — no Navis Ops account required.

Publish

Click Publish in the pen editor header.

Copy the link

Click Copy link in the confirmation dialog. The URL is now on your clipboard.

Share it

Paste the URL into Slack, Discord, iMessage, email, or anywhere else. The pen is immediately accessible.

If you update the pen after publishing, the public URL always serves the latest saved version. You don’t need to re-publish after edits.

When you paste a pen URL into Slack, Discord, or Twitter, the platform fetches a preview using Open Graph metadata. Navis Ops serves the pen’s title and a preview image automatically.

Slack — unfurls with the pen title and a card preview
Discord — unfurls with the pen title and preview image
Twitter — shows a summary card with the pen title

Social previews can lag up to 5 minutes after you rename a pen. If you update the title and share immediately, platforms may show the old title until their cache refreshes.

Unpublish and republish

Unpublishing takes the pen offline — the public URL stops working immediately for new visitors. The URL is preserved, so republishing brings the same link back online. To unpublish: open the pen, click Publish in the header, then click Unpublish. To republish: open the unpublished pen and click Publish again. The same /p/<slug> URL resumes working.

A browser tab that already has the pen loaded keeps running until the user reloads the page. Unpublishing stops new page loads immediately but doesn’t kill existing open sessions. To force a complete stop, delete the pen.

Project linking

Link a pen to a project to keep your demos and sketches alongside the related tasks and notes.

Open the project

Go to the project’s detail page and click the Code Pens tab.

Link the pen

Click Link pen and select the pen you want to attach. Or drag an existing pen onto the tab.

Linked pens appear in the project’s Code Pens tab. They also continue to appear in your main Code Pens list. You want to show a teammate a quick bar chart prototype.

Create a pen

Click New Pen and title it Sales chart sketch.

Add the chart code to HTML

Paste the following into the HTML field:

<canvas id="c" width="600" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('c'), {
    type: 'bar',
    data: {
      labels: ['Q1', 'Q2', 'Q3'],
      datasets: [{ data: [12, 19, 8] }]
    }
  });
</script>

Add some CSS

Paste the following into the CSS field:

body {
  padding: 24px;
  font-family: system-ui;
}

Preview

The bar chart renders immediately in the preview panel. Q1, Q2, and Q3 bars appear — no page reload needed.

Publish and share

Click Publish, then Copy link. Paste the URL into Slack. Slack unfurls the pen’s title and a preview card. Your teammate clicks the link and sees the live chart in their browser — no login required.

Limitations

What you’ll hit	Why
No syntax highlighting or autocomplete	The editor is a plain textbox, kept minimal on purpose. For serious work, write in your IDE and paste the result into the pen.
One HTML field and one CSS field per pen	No multi-file projects, no separate JS tab, no asset uploads.
Pens cannot access your Navis Ops data	The preview iframe is sandboxed without `allow-same-origin`. Pen JavaScript cannot read your session, cookies, localStorage, or workspace API. This is an intentional security boundary.
No file uploads inside a pen	Use a CDN URL for images, fonts, or any binary asset. Files stored in your Navis Ops Files area are private and inaccessible from a pen.
No localStorage inside the pen	The sandbox blocks it. Pens cannot persist data across reloads.
No backend code	Pens are pure client-side. There’s no server, no database, no environment variables.
No password protection or expiration on shared links	If someone has the URL, they can view the pen. To revoke access, unpublish.
Social previews can lag up to 5 minutes	Renaming a pen and re-sharing immediately may show the old title in Slack or Discord until their cache expires.
No build step	Load libraries from a CDN at runtime. There’s no bundler or package manager.

FAQ

Can my pen call the Navis Ops API or read my workspace data?

No. The preview iframe runs with sandbox restrictions that block same-origin access. This is the security boundary that prevents a bug in a pen from leaking your session or workspace data. To give an AI assistant access to your workspace programmatically, see the MCP Connector instead.

I unpublished my pen but the URL still works in someone's browser tab.

Unpublishing stops new page loads immediately. A tab that already has the pen loaded keeps running until the user refreshes the page. To force a complete stop, delete the pen.

Can I delete a pen permanently?

Deleting from the Code Pens list is a soft delete — you get an undo toast right after. Soft-deleted pens are hidden from your list and their public URL stops working. If you need a hard purge (to guarantee the data is fully removed), contact support.

Can I use an image stored in my Navis Ops Files area inside a pen?

No. Files are private, and the pen’s sandboxed iframe can’t access them. Use a public host like GitHub raw URLs, Unsplash, or Imgur for any images or binary assets your pen needs to load.

Are JavaScript errors visible?

Open your browser’s developer tools while viewing the pen. The sandboxed iframe surfaces console errors there. There’s no built-in console panel inside the pen editor.

Can I version or roll back a pen?

Pens don’t have version history the way Notes do. Autosave overwrites the previous state. If you want to preserve a version, duplicate the pen before making changes.

Will the public URL change if I rename the pen?

No. The URL is based on a randomly generated slug, not the pen’s title. Renaming the pen updates the title that appears in social previews but leaves the URL unchanged.

Files

Store private binaries you want to keep but not share publicly.

Notes

Write and organize rich-text content that doesn’t need a live code preview.

Projects

Link a pen to a project to keep demos alongside related tasks and notes.

MCP Connector

Connect AI assistants to your real workspace data with structured tool access.

Get Started

Projects & Tasks

Notes & Files

Workflows

AI & Integrations

Changelog

Build and share code snippets with Code Pens

Getting started

What you can do

Live preview editor

CDN libraries

Public sharing

Social unfurling

Unpublish and republish

Project linking

Editor

Using libraries

Unpublish and republish

Project linking

Limitations

FAQ

See also

Files

Notes

Projects

MCP Connector

​Getting started

​What you can do

Live preview editor

CDN libraries

Public sharing

Social unfurling

Unpublish and republish

Project linking

​Editor

​Using libraries

​Sharing

​Social unfurling

​Unpublish and republish

​Project linking

​Walkthrough: share a chart demo

​Limitations

​FAQ

​See also

Files

Notes

Projects

MCP Connector

Getting started

What you can do

Editor

Using libraries

Sharing

Social unfurling

Unpublish and republish

Project linking

Walkthrough: share a chart demo

Limitations

FAQ

See also