The builder imports one JSON file whose top-level format is functional-websites-library. Inside that file, custom blocks live in the blocks array. Each item has display metadata plus a real builder block object in block.
1. Create JSON
Put your blocks inside a blocks array.
2. Save As File
Use any filename ending in .json.
3. Import It
Open the Custom Library in the builder and import the file.
Copy And Paste: Minimal Custom Block Pack
This is the easiest working example. It creates one reusable HTML block card inside the Custom Library.
custom-block-pack.json
{
"format": "functional-websites-library",
"version": 1,
"title": "My Custom Blocks",
"exportedAt": "2026-04-19T00:00:00.000Z",
"pageTemplates": [],
"blocks": [
{
"id": "block_feature_card_green",
"name": "Feature Card",
"description": "A reusable marketing card with heading, text, and button.",
"author": "Your Name",
"category": "Marketing",
"priceLabel": "Custom Block",
"source": "manual-json",
"block": {
"id": "block_feature_card_green_inner",
"type": "html",
"props": {
"code": "<section style=\"padding:28px;border-radius:20px;background:linear-gradient(135deg,#102219,#173524);color:#ebfff2;border:1px solid #28543a;max-width:720px;margin:0 auto;\">\n <span style=\"display:inline-block;margin-bottom:12px;padding:6px 10px;border-radius:999px;background:#4ade80;color:#0c2013;font-size:12px;font-weight:700;\">Custom Block</span>\n <h2 style=\"margin:0 0 10px;font-size:30px;line-height:1.1;\">Launch faster with reusable sections</h2>\n <p style=\"margin:0 0 18px;color:#b8d4c2;font-size:16px;line-height:1.6;\">Drop this block into landing pages, services pages, or sales pages and swap the copy to fit the offer.</p>\n <a href=\"#\" style=\"display:inline-block;padding:12px 18px;border-radius:999px;background:#4ade80;color:#08210f;font-weight:700;text-decoration:none;\">Call To Action</a>\n</section>"
}
}
}
]
}
What You Can Change
name: the label shown in the Custom Library.
description: the short helper text shown under the block name.
category: useful for grouping packs like Marketing, Hero, Pricing, FAQ, Footer, or Contact.
priceLabel: optional label shown in the library UI.
block.type: use a real builder block type. The easiest custom format is html.
block.props.code: your actual HTML snippet. Inline styles are the easiest way to make the block portable.
Copy And Paste: Two Blocks In One Pack
You can ship multiple reusable blocks in one file. Add more objects to the blocks array.
multi-block-pack.json
{
"format": "functional-websites-library",
"version": 1,
"title": "Launch Blocks Pack",
"exportedAt": "2026-04-19T00:00:00.000Z",
"pageTemplates": [],
"blocks": [
{
"id": "launch_cta_band",
"name": "CTA Band",
"description": "Full-width CTA strip with button.",
"author": "Your Name",
"category": "CTA",
"source": "manual-json",
"block": {
"id": "launch_cta_band_inner",
"type": "html",
"props": {
"code": "<section style=\"padding:26px 22px;border-radius:18px;background:#4ade80;color:#08210f;text-align:center;\"><h2 style=\"margin:0 0 10px;font-size:28px;\">Ready to launch?</h2><p style=\"margin:0 0 16px;color:#143321;\">Use this strip anywhere you need a clean conversion push.</p><a href=\"#\" style=\"display:inline-block;padding:12px 18px;border-radius:999px;background:#08210f;color:#f4fff7;text-decoration:none;font-weight:700;\">Start Now</a></section>"
}
}
},
{
"id": "launch_testimonial_card",
"name": "Testimonial Card",
"description": "Simple social-proof quote block.",
"author": "Your Name",
"category": "Testimonials",
"source": "manual-json",
"block": {
"id": "launch_testimonial_card_inner",
"type": "html",
"props": {
"code": "<section style=\"padding:24px;border-radius:18px;background:#ffffff;border:1px solid #d8e4ef;box-shadow:0 18px 40px rgba(0,0,0,.06);\"><p style=\"margin:0 0 12px;font-size:18px;line-height:1.6;color:#102219;\">“This builder gave us a clean site we actually own.”</p><strong style=\"display:block;color:#28543a;\">Jamie, Studio Owner</strong></section>"
}
}
}
]
}
Import Checklist
Save your JSON file.
Open the builder and unlock Pro.
Open Custom Library.
Choose the import option for a downloadable pack.
Select your JSON file.
Your block pack will appear under Custom Block Packs.
Need Help?
Want us to build custom blocks for you?
If you want polished custom block packs made for your niche, brand, or clients, email us with what you need and we can build them for you.