Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.navisops.com/llms.txt

Use this file to discover all available pages before exploring further.

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

1

Open Code Pens

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

Create a new pen

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

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.
4

Save

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

Share

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.

​
Sharing

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.
1

Publish

Click Publish in the pen editor header.
2

Copy the link

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

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.

​
Social unfurling

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.
1

Open the project

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

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.

​
Walkthrough: share a chart demo

You want to show a teammate a quick bar chart prototype.
1

Create a pen

Click New Pen and title it Sales chart sketch.
2

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>
3

Add some CSS

Paste the following into the CSS field:
body {
  padding: 24px;
  font-family: system-ui;
}
4

Preview

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

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 hitWhy
No syntax highlighting or autocompleteThe 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 penNo multi-file projects, no separate JS tab, no asset uploads.
Pens cannot access your Navis Ops dataThe 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 penUse 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 penThe sandbox blocks it. Pens cannot persist data across reloads.
No backend codePens are pure client-side. There’s no server, no database, no environment variables.
No password protection or expiration on shared linksIf someone has the URL, they can view the pen. To revoke access, unpublish.
Social previews can lag up to 5 minutesRenaming a pen and re-sharing immediately may show the old title in Slack or Discord until their cache expires.
No build stepLoad libraries from a CDN at runtime. There’s no bundler or package manager.

​
FAQ

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.
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.
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.
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.
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.
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.
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.

​
See also

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.