What Are Demo Component Blueprints?

Demo Component Blueprints are prebuilt, fully functional JCB component templates designed to help you get started quickly. They include real-world examples of fields, views, layouts, dynamic GETs, custom code, packaging, and permissions — all mapped and ready to compile.

These blueprints can be imported directly into JCB, giving you a working component from which to learn, test ideas, or use as a foundation for new projects. They showcase JCB’s capabilities and reduce the learning curve by offering tangible, editable examples.

Key Features

• 🧱 Prebuilt, Fully Mapped Projects: Each blueprint contains a working set of:
  • Fields, Views, and Site/Admin architecture
  • Layouts, Templates, and Menus
  • Permissions, language strings, dynamic queries
  • Snippets and reusable UI patterns
• 📦 Importable via JSON or Git: Load blueprints from:
  • JSON files provided by the community or VDM
  • GitHub/Gitea repositories (via JCB’s Git integration)
• 🧪 Test-Ready: Blueprints are built to compile out-of-the-box — no extra configuration required. You can install the compiled result into Joomla immediately.
• 📚 Demonstrates Best Practices: Each blueprint illustrates recommended patterns such as:
  • Proper field naming and types
  • Dynamic GET usage
  • ACL and menu setup
  • Field visibility and dynamic templates
  • Round-trip code examples
• 🔁 Customizable & Extendable: You can rename, edit, add to, or fork a blueprint into a new component. Every blueprint is yours to fully modify once imported.
• 🧠 Links to Tutorials: Many blueprints are accompanied by video walkthroughs or wiki guides to help you understand how they work.

Example Blueprints Available

• 🔰 Hello World (Minimal Component)
• 📋 Todo Manager (Tasks, statuses, dates)
• 📦 Inventory System (Products, categories, orders)
• 📄 Document Library (Uploads, permissions, public views)
• 👤 User Submissions (Frontend submission with ACL)
• 🔗 Relational Data (Linked views with dynamic filtering)
• 🛠️ Admin Tools (Dashboard-focused views)

More are available through the JCB community or official GitHub repositories.

How to Use Demo Blueprints

1. Visit the Packages or Demo Blueprint section of the JCB website or Git repository.
   Example: https://github.com/joomengine/packages
2. Download the JSON file or clone the blueprint repository.
3. In your JCB installation:
   • Go to Components → JCB → Admin Views → Import
   • Upload the blueprint JSON or point to the Git repo
4. Once imported, open the blueprint, explore the fields and structure, and compile to generate the component.
5. Install the compiled component into Joomla and start exploring it in action.

🧠 Pro Tip: You can export your own components as blueprints to share with others or to serve as templates for future work.

Learn More

• 🎥 Video: How to Import a Demo Blueprint
• 📘 Wiki: Demo Blueprints & Recommended Use
• 🔗 Blueprints Repository
• 🧠 How to Create Your Own Blueprint

Conclusion

Demo Component Blueprints are the fastest way to explore the full power of JCB. Whether you’re new to component development or just want to save time, these blueprints provide an ideal foundation for learning, prototyping, or building production-ready extensions.