Customise your Phoenix HTML Generator

Ben Sharman
Mar 10, 2017 · 3 min read
Image for post
Image for post
Generator Hostel Dublin by Rosa G

What’s it all about?

Scaffolding with Phoenix generators, especially with mix phx.gen.html, is a great way start out a project. Not only do you get a resource all wired up for CRUD it also provides unit tests and demonstrates best practices.

All this sounds great so why did I stop using such a powerful ally after that initial burst of enthusiasm? I think the main reason was the desire to take off the proverbial training wheels provided by the generator and get writing some sweet Elixir code. My confidence was up and going it alone was aided by a helpful feedback loop of error messages and stack traces.

The fundamental point i’d completely missed of using a generator with templates is achieving consistency through automation. Consistency is one of the keys to a maintainable codebase and also happens to be the basis of a great UX. By customising the Phoenix HTML generator maybe I can achieve both of these goals.

The scenario

Being an opinionated software engineer I’ve decided my new CRUD project will use Milligram, a minimalist css framework, instead of the standard bootstrap css used by Phoenix and most of the web. Making that one simple decision renders the standard Phoenix HTML generator pretty useless.

One of many solutions

Replace the standard mix phx.gen.html with a project specific generator and templates. The templates can then be updated and re-used to generate each new resource I add with the latest styles and layout.

Let’s do it!

  1. Create a new Phoenix 1.3 project

2. Replace assets/css/phoenix.css with milligram.css

3. Make the templates and mix task project directories

4. Copy all current HTML generator templates to the new project templates directory

5. Copy the current generator task to the new project tasks directory

6. Open lib/boiler/mix/tasks/boiler.gen.html.ex in your favourite editor and update the module name to Mix.Tasks.Boiler.Gen.Html

7. In the same file search / replace all instances of lowercase phx with boiler

8. Check that your code compiles and you have a boiler project mix task

If all went well you should see our new mix task listed as mix boiler.gen.html

9. Its time to edit the eex templates in priv/templates/boiler.gen.html using Milligram classes and any markup changes before using our new generator command.

Milligram uses a different grid system to bootstrap so we also need to update lib/boiler/web/templates/layout/app.html.eex

Its generate time!

Use our new mix task as you would with the Phoenix generator.

Follow the instructions to add the resource to the router and run the migrations.

Start the server withmix phx.server and visit http://localhost:4000/users to see your custom generated HTML templates in action.

Don’t stop now

This is a small example of generating custom markup for a CRUD app but its only a taster of what’s possible.

Are you using Phoenix custom generators in creative ways?

Thanks for reading!

The repo can be found at

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store