How to Use Fragments
Fragments in Assembly are powerful tools that allow you to generate, preview, and integrate various types of code snippets and visualizations directly within your development environment. This guide will walk you through the different types of fragments available and how to use them effectively.
What are Fragments?
Fragments are self-contained pieces of code or content that Assembly can generate, display, and allow you to interact with. They come in several types, each suited for different purposes:
- HTML
- SVG
- React
- Mermaid
- Python
General Fragment Usage
Generate a Fragment
Ask Assembly to create a specific type of fragment. For example: “Create a React component for a user profile card”
View the Fragment
The generated fragment will appear in the Fragment Viewer.
Interact and Refine
You can ask Assembly to modify the fragment, explain parts of it, or generate variations.
Copy or Export
Once satisfied, you can copy the fragment to use in your project or export it as a file.
Now, let’s dive into each fragment type in detail.
HTML Fragments
HTML fragments allow you to create and preview web content, including styling and interactivity.
Example: Creating an Interactive HTML Fragment
Request an HTML Fragment
Ask Assembly: “Create an HTML fragment for a responsive navigation menu with a dropdown”
View and Refine
Assembly will generate the HTML, CSS, and JavaScript for the menu. You can ask for modifications, such as: “Add a search bar to the navigation menu”
Import External Library
To add animations, you might say: “Import the Animate.css library from CDNJS and apply a fade-in animation to the dropdown”
SVG Fragments
SVG fragments are perfect for creating scalable graphics and animations.
Example: Generating an Animated SVG Logo
Request an SVG Fragment
Ask Assembly: “Create an SVG fragment for an animated logo of a rocket launching”
Refine the Design
You can request changes like: “Make the rocket trail change colors as it animates”
React Fragments
React fragments allow you to create powerful, interactive components with access to popular libraries.
Example: Building a Data Visualization Component
Request a React Fragment
Ask Assembly: “Create a React component for a data dashboard using Shadcn UI”
Add Interactivity
Refine the component by saying: “Add a filter functionality to the dashboard using Shadcn’s Select component”
Style with Tailwind
Enhance the styling: “Apply Tailwind classes to make the dashboard responsive and add a dark mode toggle”
Mermaid Fragments
Mermaid fragments enable you to create various types of diagrams using a simple markdown-like syntax.
Example: Creating a System Architecture Diagram
Request a Mermaid Fragment
Ask Assembly: “Create a Mermaid diagram showing the architecture of a microservices-based e-commerce system”
Refine the Diagram
You can ask for changes like: “Add a database component to the user service in the diagram”
Python Fragments
Python fragments are ideal for data analysis, scientific computing, and creating quick visualizations.
Example: Analyzing and Visualizing Sales Data
Request a Python Fragment
Ask Assembly: “Create a Python fragment to analyze monthly sales data and visualize the trend”
Refine the Analysis
You can request additional analysis: “Add a comparison of this year’s sales to last year’s”
Best Practices for Using Fragments
- Start Simple, Then Refine: Begin with a basic request and iteratively refine your fragment.
- Combine Fragment Types: Use different fragment types together for comprehensive solutions.
- Version Control: Save important fragments and track changes as you refine them.
- Documentation: Add comments to your fragments to explain complex logic or usage.
- Reusability: Design fragments with reusability in mind, using parameters where appropriate.