6
3 Comments

Codepen With an Export Image Button

Problem

Hey, IndieHackers! 👋

I spent the first seven years of my career working on marketing teams ranging from a small digital agency to a venture-backed tech company. Despite their differences, one similarity is that they struggled with creating on-brand images fast and reliably.

I knew there had to be a way to automate image creation and empower teams to make changes themselves when needed. So, I set out to build an MVP.

Research

Before I wrote a line of code, I collected a list of products that were already out there, which I outline below.

HTML/CSS to Image

Website

This solution targets developers and doesn't offer any user interface because it's strictly an API. I like this service because I enjoy the flexibility of writing my own HTML/CSS, but I didn't like that it lacked features that would make it easy for non-technical teammates to create images.

HTML/CSS to Image pricing was the cheapest out of all three products, which wasn't surprising because it's only an API.

Bannerbear

Website

Bannerbear is well known on IndieHackers, and I enjoyed their product when trying it out. However, as I mentioned above, I prefer the flexibility of HTML/CSS. I felt like their editor was limiting the designs I wanted to create. However, it does provide an easy API that you can use to automate image creation.

Bannerbear pricing is the most expensive of the three products, but the pricing for their second and third tiers is close to HTML/CSS to Image.

Placid

Website

Placid is closer to Bannerbear because it offers an editor where you can create templates. It also offers an API that you can use to automate image creation, but it's lacking an HTML/CSS editor.

Placid pricing is competitive with HTML/CSS to Image.

Solution / MVP

Now, I would like to introduce Mattermix, a browser-based editor and API that uses HTML and CSS to create and export images.

Editor

With the editor, you create templates using HTML and CSS or kickstart a new design from one of our Starter templates. Then you add Variables for dynamic content like text, colors, and images.

These Variables can then be changed using standard web form inputs that your team will know how to use, like text and file selection. Once done, just export the image as a JPG or PNG.

API

With our API you can fully automate your image creation. All you need is an API key and make a simple POST request with the template ID and the Variables you want to update.

Then, our API will return a URL of an image hosted on our global CDN. This opens up a ton of possibilities to simplify and automate your image creation process, with even more coming soon with future integrations.

Early Access

If you're interested in joining early access you can fill out our Early Access form. If you're a good fit we will reach out with an invite link.

Also, if you have any other feedback or ideas I would love to hear them in the comments below. Thank you!

  1. 2

    What about Abyssale.com as another competitor ?
    I created a similar project to yours but never found validation unfortunately: https://hivisio.goshiplabs.com/
    I've submitted your form out of curiosity!

    Thanks

    1. 1

      I haven't heard of Abyssale, but their product looks solid.

      I tried checking out the product you built, but the link is broken.

      Thanks for submitting a form! I'll send over an invite today.

  2. 1

    This seems very useful to me! Working in DevRel and technical content marketing I constantly have had to produce such images and it did take up a fair amount of time. Now that I'm working more on the management side, the struggle is getting writers to produce clear and consistent images. I'll definitely recommend this to the writers I work with.

    Edit: Another one I've used is https://carbon.now.sh, it produces a good look but I often have to fiddle with settings a lot.

  3. 1

    This comment was deleted 2 years ago.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 48 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 14 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments