DEV Community

Eric Della Casa
Eric Della Casa

Posted on

We open sourced a React content layer for emails, web pages, and PDFs

Elements

Last week we open sourced Elements, a project we’ve been working on at Unlayer to make it easier to create emails, web pages, and PDFs from the same React component system.

You can find the repo here: https://github.com/unlayer/elements

The idea came from a problem we kept seeing over and over again: teams often need to create the same piece of content for different destinations, but the implementation ends up being completely separate each time.

The content is usually very similar, but the code and rendering requirements are not.

With Elements, the approach is to keep the component system shared while adapting the final output to where the content will live:

  • renders email-safe table HTML

  • renders responsive web HTML

  • renders print-ready HTML for PDFs and documents

This means developers can work with familiar React components without forcing every output into the same rendering model.

One of the reasons we felt this was the right moment to open source the project is the growing role of AI agents in software development and content generation. AI can create content and code quickly, but teams still need the final output to be structured, reusable, version-controlled, and reliable enough to use in production.

We see Elements as a shared layer that both developers and agents can build from.

It’s still very early, and we know there are plenty of questions and tradeoffs we still need to work through, particularly around email-client limitations, accessibility, layout flexibility, and the overall contributor experience.

That’s also why we decided to open source it now rather than wait until everything felt finished. We’d rather involve builders early, hear where the approach makes sense, and understand where it falls short.

Any feedback is more than welcome, whether it’s on the architecture, documentation, developer experience, or simply something you’d like to see added next.

Some useful links:

Top comments (0)