Complete Frontend Atomic Workflow

“More than a tool set, Toolbox offers you a mature and cutting edge frontend approach to work with styleguides”

Main features

Configurable Scaffolding

With generator-toolbox, you can quickly create a new projects using your own parameters and preferences. It will fit perfectly with any types of backend file structure.


Based on the common Atomic Design Principles, Toolbox allows you to create seamlessly your own components library entirely live documented.


Toolbox came, out of the box, with a complete set of Gulp tasks who will process all your project’s file automatically, on each save, without taking care of.

Smooth styling

By using all the features who came with Sass, your styling process will be much cleaner and more maintainable. The linter embed will also help you to be more accurate and consistent.

Modern scripts

The Toolbox’s Webpack configuration will help you debuging your ES6+ components scripts and seamlessly bundles them for production pruposes.

Advanced templating

Very popular in many applications and CMS communities, Twig will help you write and embedding components. You can still write plain HTML, but you will miss a lot of good stuff.


Aside of your components library, Toolbox allows you to write documentation pages using Markdown or HTML with a flexible hierarchy.


The Toolbox generated documentation must look like your project’s guidelines. So you can completely customize how the styleguide will look like and make it feel like home.

Install the Generator to get started

npm install -g yo generator-toolbox