Type something to search...
to navigateto selectESC to close

Snippets are reusable blocks of code—like Hugo shortcodes, JSX components, or HTML—that you can quickly insert into your content while editing.

What are Snippets?

Think of snippets as “templates” for complex elements. Instead of manually typing out a complex shortcode or JSX block every time, you can save it once and reuse it anywhere.

Saving a Snippet

You can save any block of code directly from the editor:

  1. Write your code: Type your shortcode, JSX, or HTML block in the editor.
  2. Hover to Save: Move your mouse over the block. A small toolbar will appear in the top-right corner.
  3. Click “Plus” (+): Click the plus icon to open the Save as Snippet dialog.
  4. Name your Snippet: Give it a friendly label (e.g., “Alert Box” or “Info Note”).
  5. Save: Click Save, and it’s now available for reuse!

Using Snippets

To insert a snippet into your content:

  1. Open Snippets: Click the Snippets button (+) in the editor toolbar.
  2. Select Snippet: Choose a snippet from your list. You can also search if you have many.
  3. Automatic Insertion: Sitepins will insert the code into your cursor’s current position.

Smart Insertion: If you insert a block-level snippet (like a large JSX component) inside a paragraph, Sitepins automatically converts it to an inline version to maintain your text flow.

Managing Snippets

You can view, edit, or delete all your snippets from the dashboard:

  1. Go to your project Settings.
  2. Click on Snippet Management.
  3. Here you can:
    • Edit: Update the code or label of an existing snippet.
    • Delete: Remove snippets you no longer need.
    • Create: Add new snippets manually from scratch.

Advanced: Linking to Schemas

When creating or editing a snippet, you can associate it with specific Schemas. This helps keep your snippets organized by context, showing only relevant snippets for the type of content you are currently editing.

Storage Location

All your snippets are saved as small JSON files inside your repository at: .sitepins/snippet/

This means your snippets are version-controlled alongside your code and available to everyone on your team!

Best Practices

  • Keep it Simple: Use snippets for repetitive structures like complex tables, call-to-action buttons, or media embeds.
  • Give Clear Names: Use labels that describe what the code does (e.g., “YouTube Embed” instead of “YT-1”).
  • Organize with Schemas: If you have many snippets, link them to specific schemas to keep your editor toolbar clean.