Ben Edelstein:
Hello, and welcome to PodRocket. Today I'm here with Olivier Tassinari, who's the creator of MUI, a React component library. How are you, Olivier?

Olivier Tassinari:
Hey Ben, thanks for having me. I'm doing great. How are you doing?

Ben Edelstein:
Also doing great. Excited to have you on this show and learn about what you're building, so maybe you could give us just a quick overview. What is MUI?

Olivier Tassinari:
Yeah, sure. MUI is a library of React components for your applications, and I can expand there, because that can imply many different things, so I think we could come back to the beginning of how we started. So, initially the idea was you had React and you had Material Design. And so, we went into putting the two together so you could have pre-made React components for your application, so effectively I don't have to spend time building the components and you can start right from that. So, in a sense, we are a preset of pre-made components, and then over time we grew into different directions and expanded that. But, I guess we can dive into that later on.

Ben Edelstein:
Got it, so pre-made React components, and frankly there's quite a few React component libraries and styling tools and a million, or thousands, or hundreds of thousands, some very large number of open source React components that you can just grab on npm. So, what's different about MUI, or why should people be interested?

Olivier Tassinari:
Yeah, how did we come about growing to the point we are right now? Initially, we were there very early on. We were there about six years ago when Google released their first proper design specification with Material Design, and we were there, and initially we had this traction on the market. And, back then, there were not that many people that were doing anything in this space, so we grew organically from that point, and what maybe today is differentiating us to people out there, first is history, this long track record of having done many iterations. I think so far, we have had 2,500 contributors on the repository, so having been able to learn and use all this contributions, we hope we've been able to build an above-average quality of components. Simply, the mere fact that we have seen a lot of use cases that we try to accommodate.

Olivier Tassinari:
But, if you go back to your initial question, what is MUI? I can talk about the mission we are, and we have, which is about empowering people to build more UIs and making building UIs more accessible. And, that comes in two very different forms, so if you are somebody that is looking for a set of React components and you are hesitating between different options, one of the first things you're going to look at is, what does that look like? What's the design, and how does that fit with my actual application? Well, it depends on your context. You could be an entrepreneur and you don't have a designer with you, so in this case you are going to be looking at what are the popular design trends in this space and what are most like style I want to look like, and then try to pick a set of UI components that's going to match that, so you have the least amount of customizations to do.

Olivier Tassinari:
Otherwise, you are coming from a background where you have a designer, and in this case you have many designers that are following Material Design... You have two different brackets there, you have people that are implementing Material Design per se, and you have people that are using the design principles to influence their design aesthetics, and like the innovation, and relying on basically... At Google, they have a team of 150 people working on Material Design, so you have this huge pool of people that have been trying to run user experience research and coming up with best practices effectively. So that's something we try to leverage and to put into the components we ship.

Ben Edelstein:
Got it. So it sounds like with MUI, you're getting a more opinionated kind of design sense versus, I know a lot of other component libraries, they're maybe more generic and you have to apply your own design on top of the base components. Is that the right way to think about it? That MUI has an opinion on what the design is going to look like, and maybe there's some customizability, but pretty much you're going with MUI because you like the look and feel the components out of the box.

Olivier Tassinari:
I can double down on why are people going with MUI? What's the trajectory for them? And that has evolved a little bit over time. Initially it was, "I like Material Design. I want it." Then it grew into "I'm used to the theming, the customization experience to their API, but now I'm working on a new project and the designer doesn't want to implement Material Design. He wants his own bespoke design. But as a developer, I already know how to use the system, so I'm going to pick it and customize it." So we currently have these two kind of audiences. And of course, when you are in the bracket where you want to customize the library, then having this preexisting Material Design set of components is not that great. At least, it's a double-edge sword, because when, for instance, we do breaking changes in the library, then you can end up having to adapt for them.

Olivier Tassinari:
So what you likely want is to be able to start from a lower level, and we are working on more... Actually, we're already exposing versions of the components that are without any styles, so that you have this trade off where you can say, "Alright, I love Material Design. What I want to do is, I want to change the font sizing." And we are this extensive theming solution, so you can go pretty deep into customization. But you also have the other bracket of people who are like, "Well, I would rather just start from scratch, and give me the meats of the accessibility, and I will take care of the CSS."

Ben Edelstein:
So what does the theming API look like? Are you just customizing CSS or CSS and JS stylesheets, or is it more of a guided approach where you can change certain things, but a lot of it comes out of the box?

Olivier Tassinari:
Yeah. I'm going to dive into how that works in practice in the product, and we have different layers we try to build on top of each other. So you have a layer which is purely the style engine, and that's what we are calling in the project, the system, or the style engine package, which is even a step lower. So there the purpose for us is we've come with the intersection of the style API, something that you're going to find in style component in motion and the like... It seems the community has been stabilizing around, at least for people using CSS and JS around the style API. So there what we've done is we've created the internal API that we try to implement with adapters. So, currently we have a default adapter for a motion and an optional one you can turn on for style component, and we're also looking for people to add their own.

Olivier Tassinari:
So that's the styling CSS and JS layer, there simply you have this CSS piece applied to my component, then we have a second layer, which is more what I mentioned before, the base package, where there you get primitives and style only components. And then we put them together, and we add on top of this a system which you might find as this theming solution, where effectively we provide you a system where you have, for instance, a box component, a stack component, you will find in your theme, a section for typography, a section for your color palette, a section for your break points. That's what we call the system.

Olivier Tassinari:
And based on these three building blocks of systems, style engine, and the base, we put that together and we ship the Material Design components. At the end of the day, what most people are going with is the Material Design package, because it preassembles everything. But if you are in the mood for going one level down, then you can. In practice, how does that work with the theming work? It's one theme structure like design tokens, that then are reused by the components, so that, the idea there is to get as maximum consistency in your application, as you can wish for.

Ben Edelstein:
Got it, makes sense. So, correct me if I'm wrong, but there's MUI Core, which is pre-open source, anyone can use, and then MUI X. And is that the paid product? Because I know there's a paid product that you offer. So help me understand a bit about what are the offerings and what do you get if you pay?

Olivier Tassinari:
Yeah, okay. What I just described is MUI Core, which is our set of fundamental, foundational components, and that is completely open source, and that's what we started historically with. And over time, we keep hearing the same feedback from the community, which is, "Alright, it's great to have this set of components, but I also want to have more advanced features. I want an advanced data grid. I want charts. I want a tree view. I want a big calendar. So can you do something about this?"

Olivier Tassinari:
And we thought about that problem very hard and, "Well, we can try, but we won't be able to sustain this model through the existing MIT components and the business model we have for these components." So we came up with an open core business model, where you have the fundamental features that are open source MIT and anything that is not available in the open source space currently, then we're going to publish that as a set of commercial components.

Olivier Tassinari:
Does that clarify this area? So you'll use MUI Core, basically if you are building a design system and if you are building a simple application. Then you would use MUI X if you are building a more enterprise application like an ERP or more data intensive, like you have a lot of data to process to display and there you need the power of X.

Ben Edelstein:
What are some examples of the types of components you get in MUI X versus MUI Core?

Olivier Tassinari:
Currently we have one, we have been working on it for a year and a half. It's the Data Grid, as simple as that, correlating a lot of information. And we are growing the team and trying to explore the next steps. Next, will be the Date Picker, which is currently what we consider hybrid between the Core and X. And the reason for that, if for instance you look at Bootstrap, they don't have a Date Picker, and the reason why they don't have one is because it's very hard to build. It's currently in the Core, but there the team has a hard time prioritizing and finding time to allocate to it, so we are moving it to X.

Olivier Tassinari:
It's going to stay open source, but so that we can actually empower and have it... Because we are growing the team faster than the Core, and so we'll be able to keep proper care. So that's the Date Picker coming. We have the TreeView. We are considering working on charts effectively. It's a big challenge and there already many charting solutions in the space, so we are going to move slowly in this direction, but I think over time, the next four or five years, we'll definitely go there.

Ben Edelstein:
Got it. And how does pricing work? How much do you charge? I'm curious how you thought about setting pricing and figuring out that business model.

Olivier Tassinari:
So for MUI X, that is still ongoing, to be honest. So we're exploring how that fits in practice, but what I can tell you is that first for existing feature lines that are in open source space, first was, "Well, we won't be able to charge for this and that doesn't even make sense." If you look at the trend, it's more and more of this is going open source. If you look at all the products that are popping out, they're making more and more components open source. So for anything that is already at a solid competitor in the open source space, then we're going to make it open source.

Olivier Tassinari:
Then it came up about this hybrid solution, which is what we call the Pro plan, and there it's about... So if you look at the Core, and what people are using it for, and why they are asking for each component, it's because they want design consistency. They want to have a single vendor. They don't want to have to pick different components from different libraries that have different level of accessibility, that have different levels of design, API consistency, developer experience, documentation quality.

Olivier Tassinari:
So they want one vendor and there our hypothesis was, maybe there's a space there for something that is very cheap but still a lot. If you look at the average user on the open source space, I think we will be making like $1 a year per developer using us or even less. And if you can price that 10 times, if you increase this amount by 10 times or 100 times, then you're already a lot better in terms of sustainable and being able to push your mission forward. So there we came up with this low-cost price, the Pro plan, and there the features might be available in the open source space, so the reason why people might purchase is that they want to keep the same vendor and the same design consistency in their application.

Olivier Tassinari:
And lastly, you have what we call the Premium plan, where you have features that are just not available in the open source space. And so there it's about how much value you get for your business out of them? So to give a very specific example, let's say you want to do pivoting or aggregation on your data and you want to stay inside your application, you don't want to eject and go to Excel or use like a table or whatever, like TablePlus feature from the outer world. You want to stay inside your application. You want to be able to process more information right inside your apps, so there that's where the Pro plan comes in.

Olivier Tassinari:
So in terms of pricing, how do we think about it? It's simply about looking at what people are willing to spend it for, looking at what competitors are pricing it for, and trying to find something that fits our audience and our model?

Ben Edelstein:
Yeah, it makes sense. I know pricing is always a challenge, even when I talk to people who are at massive companies, there's still always testing pricing, trying to figure it out. It's a difficult area.

Ben Edelstein:
I'm curious, I saw on the MUI site there's something about design kits for Figma and Sketch, so curious what you're building there?

Olivier Tassinari:
I think we can come back to the very first question then, "What is MUI and how does that fit inside this story?" So if you go back to the mission, it's about making building UI more accessible. And if you can practice... We import design teams and feature teams to build UIs. And there, what we realized is that if you're a developer and in an enterprise or a medium-size team, there's a higher chance you're going to be working with a designer. And this designer, you will want to be able to sketch the UIs beforehand. You will want to be able to tweak the wording with his project manager before handing over that design to the developer.

Olivier Tassinari:
So what we realized was that there were people asking for a Figma, where initially we started with Sketch, but they were basically asking for these React components for the design world. And that's what we worked on. That's what we called the MUI design kits. It's effectively trying to veer very as close as we can from code. So currently most of the people are using Figma and there you get basically the same props names, you get the same default values, you get the same design tokens, you get the same components, so effectively you are very close. You can speak almost the same language as your developers. So that's what it is about.

Ben Edelstein:
Will that be something that is part of MUI Core or would that be something that you also add into the MUI X paid version?

Olivier Tassinari:
It includes both the components. It's mostly targeted at designers and well, mostly designers, I would say. I can talk about how did we come about this product initially. So we were following Material Design very closely, and back then people were like, okay, great. I'm going to use Material Design's publishing online, their own Figma, but back then it was Sketch Kit, and so people were using it, but very quickly we heard people saying, "Well, it's great, but you guys, you have more components that they don't have." They're not using the same design, default value with the same design tokens, so it's kind of confusing when they're using it.

Olivier Tassinari:
And then when the developers come in, they have to figure out, okay, how does that fit exactly? And to give you a very specific example, so you had the accordion that Material Design is calling the expandable panel. We had a different name for this one that currently is in our line.

Olivier Tassinari:
So that's how we came about the product historically. Right now, yes, it does include Core, X product, but also on the business side, what we realized is that there's a very broad difference between designers and developers. Developers are collaborating and they are building their own tools. And I love doing that and they're doing that on their free time. It's awesome. I've been doing that for a long time, just took a lot of pleasure doing so. But the designer, it's quite different. They are used to paying for their tools. They're not this level of same collaboration. Basically, the community is not there to sustain building this kit, so we had to come about, "Alright, how can we make it work?" And so we came about making that a paid product for designers, and then we charge per seat. So if you have a team of 10 designers, then you have a price plan pricing point for 10 designers.

Ben Edelstein:
Yeah. No, makes sense. So pivoting a bit, I'm curious, to the extent that you can share, what's on your roadmap? What are you most excited about as we go into 2022? Wow.

Olivier Tassinari:
Yeah, sure, okay. So maybe a bit of background on what has been the trajectories so far. Because I haven't talked about the history of project. I didn't create the project, it was created by a team at Call-Em-All, which is a Dallas company, and I got involved very early on there. So I was, I think like four or five, six months in, trying to build my own Android application. I was like, "Well, what can I find there?" And so I landed on what they were building and I started to contribute and over time, I started to take the leadership on the execution, so reviewing pull requests on certain issues, and basically making sure that the product was growing. And then two years ago, two years and a half ago, I sat down and I was like wow, okay, I'm looking for a new opportunity and maybe I could actually accelerate this mission by moving it full time, actually more than full time, spending my days and my weekends on this and trying to push the mission as far as I could and that's how that the company started, and that's why we've been able to grow the project to this point now. Currently we are 14 people. We are going to be 16 in January and those people are allowing us to have more ambitious goals, so I think that can do the transition to your question on what's going to happen next year in 2022.

Olivier Tassinari:
There we have a couple of objectives and I think it's going to depend on which side you look at that is. I think I can talk about each subproduct we have and see how does that fit together and what's the plan there? So far as the very first plan... And you might have seen that recently, we released MUI v5 and renaming the company from Material-UI to MUI and that was a step to where we are aiming in the future.

Olivier Tassinari:
First the incentive was we were looking for a shorter name that was not associating us very strongly with Material Design, because what we saw was, at least from our survey, is that we have a growing flow of people asking, "Well, Material Design is great, but nowadays the design trends are evolving." A design trend usually has a life expectancy of about five years and you have to keep renewing it, so you have to evolve it. First we renamed the company to make sure can we actually grow beyond Material Design. The very first thing we're going to do in this direction is, I mentioned in the beginning, the base package. There we are working on... In the team, we have Michal working on this, which is to take the Material Design components and to extract the meat of the accessibility into its own package.

Olivier Tassinari:
So there we're going to expose basically Hooks and components version without style. That's what we're pushing. We hope in 2022 to make that completely comprehensive, effectively. Currently we have about five, ten components, and we want to be able to offer a full set of components so you can actually build your whole design system with this. That's the first thing we are working on.

Olivier Tassinari:
The second thing is we are working on the second design system and there the idea for us is, "Can we provide something complimentary to Material Design to the community, something that is not Material Design?" Because we've seen a lot of people asking us, "Alright, currently I'm mostly customizing and each time I'm building a new product, I'm customizing it. So could you make it so that I have fewer customizations, so it looks by default closer to what I want to get?"

Olivier Tassinari:
So we're working on this second design system. There is, again, different people working on this. We have Joo and a designer we hired recently, Danilo Leal, that are working on this. And we hope that by 2022, we'll be able to release it and to start to get traction.

Olivier Tassinari:
Of course, we have the base existing products we need to keep evolving, so we have the Material Design. There in Material Design, it's actually an interesting field because you have recently Material Design 3 that was released by Google, which is Material You, and they are targeting front node mobile applications. And we're trying still trying to figure out, "Okay, how is this going? Are people upgrading?" We're waiting a bit to see if we actually want to allocate resources there. So that's for the Core more or less.

Olivier Tassinari:
Then you will get X and there the purpose for us is simply expanding this set of components, so continually building more advanced adaptive features and more components, and trying to grow this set of components. And people have been asking very vocally about this. They want more components.

Olivier Tassinari:
So that's the 2022 goals. And I can talk about... Well, it depends. If you want we could talk about what's the vision, the long term goal, what's going to come after that.

Ben Edelstein:
Yeah. I would be curious to hear that.

Olivier Tassinari:
In this case, currently we are about at 25% market share in the React ecosystem. What I mean by 25%, if you take the React downloads and you divide them, or you take all downloads and you divide them by the React downloads. And so back to what I have presented so far, the initiative for us was, "Can we grow that number to maybe 50% in the next five years?" So that's a bold, ambitious goals, which we're going to try to attempt at it, but in order to make it so, we have to grow the team to hire. So that's one thing we are trying to work on very hard, and in order to make that happen...

Olivier Tassinari:
First, maybe I can come back to the long-term vision. Therefore, when I'm talking about making building UI accessible, if you look at why we exist and why people are joining us, it's because they are builders. They love building UIs. More importantly, they want to empower other people to build UIs.

Olivier Tassinari:
And so for us, there's this common theme we are following. And if you look at five years from now, in addition to growing the team, to developing this product in a React space, we also want the right use trend, which is, there are more people coming to the development space, people with less skills, and there's an explosion of demand for building custom applications. So we have this misalignment between the needs and the skills that are available in the market. If you look at the number of developers that have been entering the space, outside from universities, it has been more or less stable for the last five years.

Olivier Tassinari:
So there, what we are envisioning exploring is going into the low-cost space, looking into how can MUI bring something valuable to people already building, mostly the developers that are building already the application with us, and how can we bring a new product that's going to empower them to build the same thing 10 times faster.

Olivier Tassinari:
So that's the goal. We are exploring that. We have a small team working on this that started working recently. We're trying to figure out how that can happen. But hopefully for us... Our dream is that five, ten years from now, you will see the same thing that has happened, like from bytecode to assembly, then from assembly to C++, then from static to dynamic languages integrated, there might be something there that we can actually push for. So will it be a UI builder? Will it be a design system studio? That's something we are figuring out.

Olivier Tassinari:
In terms of growth, I mentioned, we are currently 16 people. This week, we are going to open eight new roles. I think if you look at our current growth rates, we're about tripling every year on average. We're looking for hiring 30 people next year. I think that's the current trend we're on.

Ben Edelstein:
I believe you raised some funding in addition to the revenue you're bringing in, is that right?

Olivier Tassinari:
No, we haven't. We are currently self bootstrap and there are a couple of reasons for that. I think the most obvious one is people picking UI or any technology, they're going to look how sustainable that is. And to some extent at least, that's one of the decision factor, which is, "Can I rely on this for the next two, three years? And can I trust the team that's going to deliver on their promise?"

Olivier Tassinari:
So what I believe is by being self bootstrap, that is by having a healthy business all of that is you're default alive. When you pick this library, you have a feeling that it won't go underground in three years from now. It is going to keep evolving and grow. That's one of the incentives to be self bootstrap. The second one is, if you look at the current monetization models we have, that's not something you can venture backed. The business economics are not there to make that, for them, valuable, even though they might be very interested. I think if you look at currently, there is a huge push from the VC world inside open source startups, so you will see a lot of money coming in the field. You've had smaller fundraising, like I think recently you had Remix, you had Dino, you had Roam, you had a couple of others. And then again for the larger companies, you had GitLab or so very recently.

Olivier Tassinari:
So people like VCs are starting to realize, "Okay, that's actually a sustainable model, open source." So, no fundraising. That might be something we will consider in the future. Currently, what we are waiting on is first being able to grow the existing products enough with a self bootstrap model so people feel like, "Alright, this is working." And then considering fundraising for the low-cost initiative, because that's quite a different area, so you have a lot more competition, a completely different monetization model so you're not selling commercial licenses, you're selling access to a cloud for instance, or if you look at Vercel what they're selling is the service. That's something you can't do with low-cost, it's completely different.

Ben Edelstein:
Well, Olivier, it was really awesome to learn about MUI. I really appreciate you coming on the podcast. Thanks so much for your time today.

Olivier Tassinari:
Thanks, Ben. It was great.

Brian:
Thanks for listening to PodRocket. Find us at PodRocketpod on Twitter, or you could always email me, even though that's not a popular option. It's Brian@logrocket.