You’ve learned the basics of static sites, chosen the perfect theme, and deployed it to the world. Now comes the exciting part: customizing your design visually.
The Jekyll Builder Interface
Jekyll Builder acts as a powerful layer on top of your existing code. When you open your project in the builder, it parses your HTML layouts and CSS rules directly, translating them into an interactive canvas.
Here is how the core features work:
1. Element Selection & Styling
Click on any element in the canvas. The right sidebar will immediately display its current CSS properties. Changing a color or padding here directly updates your output CSS rules, but it does not add messy inline styles to your HTML.
2. Component Reusability
Have a cta-box.html in your _includes/ folder? You can drag and drop that generic include anywhere in your layouts right from the component library sidebar.
3. Front Matter Binding
Editing content is seamless. When you click on a text block that is bound to a Jekyll variable like Visual Editing with Jekyll Builder: Master Your Theme, the editor knows it’s modifying the front matter, not hardcoding text into the layout.
The “No Lock-in” Philosophy
Unlike other builders, if you stop using Jekyll Builder, your project continues to work perfectly. You can run jekyll build locally, edit files in VS Code, and use Git. We believe the visual editor should adapt to the code, not the other way around.
Because Jekyll Builder connects directly to your GitHub repository, every change you make in the visual editor is saved as a standard Git commit. This means your visual edits trigger the exact same automated deployment pipelines as your code edits. You get the speed of a visual interface with the robust version control and absolute security of a repository-driven static site.
Ready to start? Pick any of the curated Jekyll themes and import them directly into your dashboard to begin editing visually.