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

# Build and share code snippets with Code Pens

> Write HTML, CSS, and JavaScript in a live-preview editor, then share a public link that unfurls in Slack, Discord, and Twitter — no login required to view.

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

<Steps>
  <Step title="Open Code Pens">
    Click **Code Pens** in the sidebar. If it isn't pinned, find it under **More**.
  </Step>

  <Step title="Create a new pen">
    Click **New Pen**. The editor opens with an HTML field, a CSS field, and a live preview panel.
  </Step>

  <Step title="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.
  </Step>

  <Step title="Save">
    Saving is automatic. About a second after you stop typing, your changes are saved. You don't need to click anything.
  </Step>

  <Step title="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.
  </Step>
</Steps>

## What you can do

<CardGroup cols={2}>
  <Card title="Live preview editor" icon="code" href="/guides/code-pens#editor">
    HTML and CSS fields with an instant sandboxed preview that refreshes as you type.
  </Card>

  <Card title="CDN libraries" icon="box" href="/guides/code-pens#using-libraries">
    Load Chart.js, Alpine.js, Tailwind, or any CDN-hosted library at runtime.
  </Card>

  <Card title="Public sharing" icon="share-nodes" href="/guides/code-pens#sharing">
    Publish to a permanent URL that works for anyone without a Navis Ops account.
  </Card>

  <Card title="Social unfurling" icon="message" href="/guides/code-pens#social-unfurling">
    Links unfurl with title and preview image in Slack, Discord, and Twitter.
  </Card>

  <Card title="Unpublish and republish" icon="eye-slash" href="/guides/code-pens#unpublish-and-republish">
    Take a pen offline without losing its URL — republish to bring the same link back.
  </Card>

  <Card title="Project linking" icon="link" href="/guides/code-pens#project-linking">
    Attach a pen to a project so it shows up in the project's Code Pens tab.
  </Card>
</CardGroup>

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

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

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

```html theme={null}
<!-- 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](https://unpkg.com), [jsDelivr](https://jsdelivr.com), or [esm.sh](https://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.

<Steps>
  <Step title="Publish">
    Click **Publish** in the pen editor header.
  </Step>

  <Step title="Copy the link">
    Click **Copy link** in the confirmation dialog. The URL is now on your clipboard.
  </Step>

  <Step title="Share it">
    Paste the URL into Slack, Discord, iMessage, email, or anywhere else. The pen is immediately accessible.
  </Step>
</Steps>

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

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

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

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

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

## Project linking

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

<Steps>
  <Step title="Open the project">
    Go to the project's detail page and click the **Code Pens** tab.
  </Step>

  <Step title="Link the pen">
    Click **Link pen** and select the pen you want to attach. Or drag an existing pen onto the tab.
  </Step>
</Steps>

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.

<Steps>
  <Step title="Create a pen">
    Click **New Pen** and title it **Sales chart sketch**.
  </Step>

  <Step title="Add the chart code to HTML">
    Paste the following into the HTML field:

    ```html theme={null}
    <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>
    ```
  </Step>

  <Step title="Add some CSS">
    Paste the following into the CSS field:

    ```css theme={null}
    body {
      padding: 24px;
      font-family: system-ui;
    }
    ```
  </Step>

  <Step title="Preview">
    The bar chart renders immediately in the preview panel. Q1, Q2, and Q3 bars appear — no page reload needed.
  </Step>

  <Step title="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.
  </Step>
</Steps>

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

<AccordionGroup>
  <Accordion title="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](/guides/mcp-connector) instead.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

## See also

<CardGroup cols={2}>
  <Card title="Files" icon="cloud-arrow-up" href="/guides/files">
    Store private binaries you want to keep but not share publicly.
  </Card>

  <Card title="Notes" icon="file-lines" href="/guides/notes">
    Write and organize rich-text content that doesn't need a live code preview.
  </Card>

  <Card title="Projects" icon="folder-open" href="/guides/projects">
    Link a pen to a project to keep demos alongside related tasks and notes.
  </Card>

  <Card title="MCP Connector" icon="robot" href="/guides/mcp-connector">
    Connect AI assistants to your real workspace data with structured tool access.
  </Card>
</CardGroup>