Code Page (Dedicated View)

The Code Page is the central hub for any snippet in SnippKit. It transforms a simple block of code into a collaborative, living asset. This view is designed for deep reading, full-screen editing, and managing access controls.

Interface Preview

Ctrl + Shift + Eto edit

typescript

Advanced Middleware Chaining

Private Snippet

1import { NextResponse } from "next/server";
2import type { NextRequest } from "next/server";
3
4export function middleware(request: NextRequest) {
5  console.log(`Request to: ${request.nextUrl.pathname}`);
6  const response = NextResponse.next();
7  return response;
8}

1.02 KB•12 lines

shared by @senior_dev•2 hours ago

Tags:#nextjs#middleware#auth

Discussion (2)

Start a new discussion...

@senior_dev· 2h ago

This middleware pattern is really clean. Have you considered adding rate limiting logic directly here?

@meAuthor· 1h ago

Good catch! I usually decouple that into a separate edge function, but composing them would be more efficient for this use case.

The preview above illustrates the view of a private snippet as seen by its owner. It combines the editor, metadata, and collaboration tools into a single, focused workspace.

1. Page Header & Controls

Ctrl + Shift + Eto edit

The header is designed for speed and utility. It provides immediate access to the most common actions without cluttering the interface.

Keyboard Shortcuts: Context-aware shortcut hints appear on the left to guide faster workflows without memorization.

Supported shortcuts include:
- Ctrl + Shift + E → Enter Edit Mode
- Ctrl + S → Save changes (available in Edit Mode)
- Shift + R → Rename the snippet
- Shift + D → Delete the snippet
Shortcuts adapt based on your current state — for example, save actions only appear while editing, and destructive actions are hidden when you lack permission. This keeps the interface powerful without feeling overwhelming.
Star: Quickly bookmark the snippet to your "Starred" list for easy retrieval later.
Share Menu: A comprehensive menu for sharing your code in various formats:
- Ghost Link (Owner Only): Generate a temporary, secure link for sensitive sharing. To view or manage existing Ghost Links, navigate to Apps → Ghost Send or open Ghost Send.
- QR Code: Display a QR code for quick access on mobile devices.
- Copy Options: Copy the full URL, the custom Slug, or the unique Snippet ID to your clipboard.
- Karbon Image: Export the snippet as a beautiful, syntax-highlighted image powered by Karbon.
Code Menu:
- CLI Command: Instantly copy the snix pull <id> command to fetch this snippet directly into your terminal/project.
- Download Markdown: Save the snippet as a Markdown file to your local machine, preserving syntax highlighting and metadata for easy reuse or sharing.

Located under the "More" (...) button, this menu houses administrative and organizational tools. It is divided into three logical sections:

Editing

Edit Code: Switches the viewer into the Monaco Editor.
Rename: Change the title of the snippet without leaving the page.

Organization

Add to / Remove from Folder: Move the snippet into a personal folder for categorization, or remove it from its current folder.
Add to / Remove from Collection: Add the snippet to a curated Collection to share with a team or the public, or remove it from one.

Advanced & Danger Zone

Serve as JSON API: (Pro Feature) Toggles a live endpoint that serves the snippet's content as raw JSON data.
Visibility: Toggle the snippet between Public (viewable by anyone with the link) and Private (viewable only by you and invited members).
Delete: Permanently remove the snippet and its history. This action cannot be undone.

3. Code Viewer & Editor

typescript

Advanced Middleware Chaining

Private Snippet

1import { NextResponse } from "next/server";
2import type { NextRequest } from "next/server";
3
4export function middleware(request: NextRequest) {
5  console.log(`Request to: ${request.nextUrl.pathname}`);
6  const response = NextResponse.next();
7  return response;
8}

The Code Viewer is the core working area of a snippet.
It is optimized for fast reading by default, and expands into a powerful editor only when you need to make changes.

The container adapts automatically based on your intent and permissions.

Header & context

At the top of the code container, you’ll always see essential context:

Language badge — clearly indicates the snippet’s programming language
Snippet title — remains visible even when scrolling long files
Author context — ownership determines which actions are available

This ensures you never lose context while working with longer snippets.

View mode (default)

By default, snippets open in View Mode, optimized for reading and reuse.

In this mode, you get:

Syntax highlighting
Code is rendered using Prism with language-aware coloring for easy scanning and comprehension.
Line numbers
Helpful for referencing specific sections or discussing code with teammates.
Copy button
Instantly copy the full snippet to your clipboard with a single click.
Explain (AI) button
When available, this allows you to generate an AI-powered explanation of the snippet to understand logic, flow, and intent.
Live indicator (JSON snippets only)
If the snippet is served as a JSON API, a Live badge appears to indicate that the endpoint is active.

View Mode is intentionally read-only to prevent accidental edits and keep interactions lightweight.

Private snippet banner

If a snippet is marked as private, a subtle banner appears directly below the header.

This banner:

Clearly communicates the snippet’s privacy status
Displays a Manage Access button (visible only to the owner)

From here, the owner can grant access to:

Individual users
Groups of collections
Teams

This allows secure sharing without exposing the snippet publicly.

Edit mode

When you choose to edit a snippet (and have permission), the viewer switches into Edit Mode.

In Edit Mode:

The read-only viewer is replaced with the Monaco Editor (the same editor used by VS Code)
The editor supports:
- Intelligent code editing
- Language-aware formatting
- Keyboard-first workflows

Edit Mode is intentionally separated from View Mode so browsing and editing remain distinct, reducing mistakes and cognitive load.

Designed for intent

The Code Viewer follows a simple principle:

View Mode → read, copy, explain, or share
Edit Mode → modify, format, and save

This separation keeps SnippKit fast for everyday use, while still providing professional-grade editing when needed.

4. Metadata & Tags