When a subscription business signs up with Limio, we have a suite of easy-to-use drag-and-drop components they can use to create a functional shop in minutes. We offer these features to make it quick and easy for businesses to get their subscriptions up and running in hardly any time at all.
However, many of the larger businesses using our platform were looking for the chance to use their own design language and align their shop with the rest of their branding. Having consistent branding throughout your customer experience is essential. It especially helps subscribers trust the subscription checkout process, an essential part of preventing abandoned baskets.
With this request in mind, the Limio team developed a set of tools that allowed developers to build their own presentation components within the Limio architecture. But we’ll be honest: the initial version of the Limio Component Playground had some growing pains, and we’ve spent the last few years working to improve it. As we prepare to release the third (and best-yet) version of this toolkit, we wanted to take a look back at what we’ve learned.
Benny, our Engineering Manager, talks through some of the history and journey to our new Limio Developer Experience.
Our first version of custom components
We created the first version of Limio Custom Components shortly after the company launched. We built it to fill a need for developers using our platform, but as so many of our customers know, launching a business is no joke, and we were swamped. That said, we wanted to make sure we were doing what we could to make things easier for our developers, so we did what we could to help them create custom presentational components.
Here’s how that initial version worked (and sometimes didn’t!). Developers would write their code independently, upload it to Limio, go to the Limio page builder, and drop that component into a page — only then could they see if their code had worked and what it would look like.
What we liked about the first version
We liked that this early iteration allowed developers to create custom presentation components. That was a great step towards allowing our customers to customise the Limio experience. We also liked that we had a version of this feature that worked well enough to get us started.
However, there were things about it we knew could be better.
What we wanted to improve about the first version
As you can imagine, going through the long process of writing code, uploading it, going into the page builder, and adding the custom component to a page wasn’t an ideal workflow for developers. There were just way too many steps, the feedback loop was too long, and it forced developers to manage code in a way that wasn’t natural to them.
So we knew we had to do better.
Limio Custom Components, take two
We tried again by building version 2: Limio Shop Components and a Component Playground.
We created this second version of Custom Components to help developers work in the ways that were most natural to them. This included:
- To be able to develop locally and see results quickly
- To be able to support their own release and versioning process
- To be able to use a CI process to release changes in a controlled environment
- To own their code
We created the Limio Components Repository, a collection of open-source Limio Shop Components that developers could edit and customise to create their own components. Developers could also build components themselves as long as they followed the following requirements:
- Component modules had to be exported as the default export from their entry file.
- They could structure their component across many files in multiple directories or just in a single file. (Only .css files are supported for styling.)
- They had to use limioProps in their package.json to make your component customisable.
- The Custom Component directory had to contain a package.json file with relevant dependencies and a limioProps array.
- Custom Components directory had to contain an index.js file, which will act as an entry point for the component.
After building their custom components, developers could bring them into the Limio Component Playground, a React Developer Tool, that allows developers to import existing Limio Components or newly written Custom Components into an environment that will contain Environment Variables and Limio SDK tools available in Limio Shop at the time of building.
What we liked about the second version
The second version of Limio Custom Components was a massive improvement over our first iteration. It allowed developers to run their code locally, see how their components would work in the Limio environment in their browser, and see changes.
It simplified some of the clunkiness from the initial version and improved the workflow for developers, making it more natural.
However, it wasn’t perfect.
What we wanted to improve about the second version
If you’re a developer, you know that manual processes can be frustrating. While the second version of Custom Components streamlined parts of the workflow, it still involved extra steps and wasn’t as refined as we wanted it to be.
For example, we didn’t like that files had to be arranged in a certain way. It was also hard to see what components you had and was hard to switch between components, requiring rerunning your code and restarting the app.
We knew that to make Limio Custom Components the best it could be, we needed to automate the process more and make things even easier for developers.
Limio Components using Storybook and Tailwind
That’s why we’re proud to announce that the third and best-ever version of Limio Components will be launching soon. This version is more user-friendly, more automated, and easier to use.
We used Storybook and Tailwind CSS to make the process quick and easy for developers. We've added TypeScript support, giving developers the freedom to work in an environment they are familiar with, reducing the need for context switching when not working with Limio. We knew Storybook would be a great choice for this project because it’s already known to so many developers. Plus, Storybook is really great at giving developers quick visual confirmation of their code. It also comes with lots of tools for presentation components that help with essential steps like streamlining accessibility, checking how components will appear across mobile and desktop, and more.
- You can build components independently of each other but also see how everything works together as a whole
- You can create custom components quickly and easily with a short feedback loop
- Testing and integration are easier with the ability to run tests within the Storybook UI
- It’s easier for non-technical members of your team to collaborate with engineers and designers and see how custom components work
Here’s how our new version works:
To create a new custom component, developers need to run just one command in terminal. This creates all the files you need to get started. Using the Tailwind design system, the component playground writes the CSS for you.
Plus, to make updates easier down the line, Limio custom components have fields that are easily editable by non-developers, making updating things like copy simple and quick.
Try the latest version of Limio Components for yourself
We’re very excited to debut the latest version of Limio Components and invite all of our developers to try it out for themselves. At the end of the day, we want to make using Limio as simple as possible for our customers and their teams.
After all, we’re engineers, too, and we know how developers want to work. That’s why we’re trying to use automation and standardised processes to reduce friction. We want developers to easily add Limio to their daily workflow, and we think this latest version will help them do just that.
You can test out the Limio Component Playground for yourself now.