What Is the Snippets GUI?

The Snippets GUI in Joomla Component Builder (JCB) provides a visual interface for creating modular, reusable blocks of code that can be dynamically injected into your layouts, templates, or logic structures.

Think of snippets as “smart partials” — blocks of content that may include variables, conditionals, or logic placeholders, which are inserted into Site Views, Templates, Layouts, and Custom Admin Views.

Summary

A visual tool to create reusable HTML/PHP/JS fragments — bindable to layouts, templates, and views.

Core Capabilities

• 🔁 Reuse Across Layouts & Templates
  Snippets can be injected into multiple places across your component for consistency and modular design.
• 🔗 Bindable to Views or Layout Regions
  You can assign snippets to specific regions or layout slots via GUI, controlling when and where they appear.
• 📥 Insert via Placeholders
  Insert snippets using dynamic placeholder tags in templates or HTML, with automatic resolution during compilation.
• 🧠 Supports Logic and Tokens
  Snippets can include conditional logic, Joomla tokens, user data, or variable replacements using JCB’s placeholder syntax.
• 🧩 Template/Component Reusability
  Snippets are managed as first-class JCB entities, meaning they can be exported, reused across blueprints, version-controlled, and reset from a repository.
• 📦 Entity Integration
  Snippets are injected into components at compile time and follow the build rules — respecting overrides, versioning, and custom scripting logic.

Use Cases

• Display custom blocks (e.g., tooltips, modals, cards) inside admin or site views
• Inject reusable JS code blocks into views
• Output variable-bound text or media blocks
• Integrate 3rd-party widgets or buttons (YouTube embeds, chart libraries, etc.)
• Add access-controlled blocks (e.g. "Only show this if user is admin")

How To Create a Snippet

• Navigate to Snippets inside JCB
• Define a name and optional description
• Write your content block using HTML, PHP, or JavaScript
• Use JCB placeholders (e.g. {username}, {item.id}, etc.)
• Access the snippet in any Template, Layout, or Site View

Advanced Options

• Define parameters that are passed in via the placeholder
• Enable or disable round-trip support (for editable snippets post-build)
• Nest snippets within other snippets or templates
• Attach conditionals for ACL-based or context-based rendering

Round-Trip Support

Snippets, like Custom Code blocks, support insert/replace tags, meaning if you modify the compiled output (e.g. in VS Code), JCB can pull your changes back into the database when re-importing the file.

This makes your snippets editable both via GUI and code — ideal for collaborative workflows.

Versioning & Repositories

• Snippets can be exported and tracked via Git
• Share snippets across multiple JCB projects using blueprint packaging
• Reset snippets from central repositories
• Fork or extend existing snippet libraries

Related Features

• Layout Builder: Assign snippets to layout regions
• Templates: Bind snippets to component-wide output structures
• Custom Code System: Combine snippet output with reusable code logic
• Libraries: Attach JS/CSS that powers your snippet interactions