Live Wires makes it easy to prototype in-browser with real content.

Live Wires is a naked, open source boilerplate for all your elements, components, modules, and templates that also serves as a production ready prototyping tool—but without any of those nasty CSS overrides.

How does it work?

  • Flow your content
  • Lay out your prototype
  • Design your style guide
  • Combine and refine them

Why should I use it?

  • Eliminate all throw away deliverables
  • Work with real content and code from start to end
  • Test and iterate in the native environment
  • Ditch the bootstrap and build your own instead
  • Focus your time and budget on design & content

The old way

Traditional approaches silo content, design, and development and reinforce waterfall-like phases. You build deliverables you have to translate, throw away, can’t test, and this whole process eats up your budget.

The better way

We think that’s bonkers. That’s why we built Live Wires. Live Wires is just as much an approach as a boilerplate. It’ll let you destroy traditional bottlenecks like:

  • Over the shoulder art direction
  • Content organization and planning
  • Deliverable hand-offs
  • Design comps
  • Redundant code
  • Wrangling and reviewing prototype files

Set the foundation for expressive, collaborative, powerful web products with Live Wires.

It’s a machine that allows us to build like humans.

Write your content

The web is an information medium. We think of design as the expression and manipulation of information.

Write your interface in your favourite word processor. Don’t forget the details like form fields, button text, and response messages. Now’s a good time to get the team in the room and work collaboratively to make sure you’re meeting the business goals of the project.

Make a skinny prototype

Make your pages and transfer that content into the Live Wires Twig templates. Add your text, forms, and media.

If you use the Craft version of Live Wires, you can just plug your content it into its flexible content fields as shown. That’s right. We’re starting with the CMS. Craft’s flexible fields plus smart templating give you a mega flexible foundation to build upon. Simple sites may not even need more Twig code. Thankfully, Twig and Craft are super powerful, simple and efficient, so you’re standing on some tall shoulders.

Congratulations. You’ve just made a mobile prototype with real content just by pasting a bit of content into Live Wires.

That means you can test your site structure right away on any device with minimal throw-away deliverables.

Your prototype is the first step to your finished product.

Lay it up

Putting content in is a big first step, but Live Wires also makes it easy to lay out desktop sizes.

Use our simple grid system to layout your HTML chunks.

Using the Craft version? It’s even easier with our handy Layout fields in every content field.

Control the focus

Stakeholders keep getting hung-up on draft content? Get them focused on the layout and flow with a flick of a switch. Change all text with a .content class to grey bars and never worry about Manager Jim questioning your grammar.

Try it out.

Give it style

Live Wires comes with a comprehensive style guide to help you document your product and design the core components.

It’s connected directly to the project CSS, so anything you code in the guide automatically updates your prototype and vice versa.

Start with your colours and typography. Move on to your field elements and repeatable components. Style the guide and watch your prototype transform like a statue carved from a marble block.

Give it a spit polish

As you style your components, your prototype will magically transform into its rough branded form.

Now’s the time to massage, iterate, and fine tune all the pieces. Congratulations, you’ve progressively designed your project from content to finished product.

With Craft, you’re already well on your way to completing a robust back-end.