Mason is the world’s first front-end-as-a-service company that gives teams the ability to build, design, deploy, and iterate on fully-functional front-end experiences—no coding required—all from one central platform.
Design tools are great for quickly trying several ideas. But I've always found it silly how much time is spent inside our tools—making it perfect and polished, only to pass it to a developer to repeat that entire process all over again.
Instead, Mason allows you to design and collaborate on something real, and push those changes in real-time. Drag and drop components you want to build, design them, polish, and publish. 💥
It's time we bring design and development even closer together.
@chadwhitaker thanks for hunting! We couldn't agree more that the design <> development process even in great engineering companies is fundamentally broken. We spend tons of time in design, and even more time in development often reinventing the wheel for problems that have already been solved a million times before by others. We hope we can change the front-end product creation process for the better!
@bdrhoa We're built to be used by product teams (engineers and designers working together on Mason) and offer a few different packages based on your team's size. We start with packages for teams of 5, but we work with companies much larger and much smaller as well. We can definitely work out something special for your non-profit / education focused team. Shoot me a note at tom@trymason.com and we'll work it out!
Okay I tried to sign up and hoped to use it! You just collected my email and told it is on a waiting list! Okay this is a great marketing trick to validate the idea. When do you plan to launch the real product? And do you have any working examples? thanks
@dainiskanopa Thanks for raising this! We actually use Mason ourselves; a portion of our site is built with Mason components! The waitlist experience and the register experience, for example, are fully Mason-built and managed. So to answer your question, the product itself works well and is functional, we're just polishing things up in the builder and adding more functionality, hence the waitlist. We plan to open soon and roll out a number of exciting features immediately!
@dainiskanopa Hey Dainis, I just put together a quick gif of a build experience to give you a little bit of a sneak peek. We'll be planning to open up the product to everyone soon.
@thomasmclaughlin, One suggestion (might be useful for you) if you have started with B2B sales : Reach out to companies who are hiring for front end developer.
Fuck Process, Make Progress. This may very well be my new war-cry.
But seriously, a lot of companies have offered this sort of service in the past without really delivering on their promise (Xcode storyboard style web development).
If you can make it simple enough to drag, drop and configure web UI components while still allowing developers to hook into pure JS logic and BE services, well then you have have a customer for life. We will just have to wait and see, looking forward to getting early access to this!
@patrickjmq It's such an interesting space to be in because so many have tried to attack the problem from so many different angles. I think where other tools get it wrong is they optimize either too much for the builder experience (leaving you locked into their platform and unable to do anything "real" in custom code), or they optimize too much for the developer experience (like an open source library that *only* developers can use to hack into bits to reinvent solutions that are already solved elsewhere)
We're treading right in the middle. Our builder lets you drop any pixel perfect design on top of your features, and the features themselves are already pre-packaged standalone units that just do their own job really well and nothing else (like authentication + 2FA for example).
Where we differ from others who came before us is in a few ways:
1) Our features live in your codebase, but can be edited/configured in Mason. No more getting stuck in a platform that only does a small amount of what you want.. anything that we don't have you can still do in your custom code
2) You can go as shallow or as deep as you want on the technical level with Mason features. You can drop in simple UI features with no logic, or you can drop in full feature flows and leverage our callbacks to plug in any custom logic you want, so things interplay nicely with the rest of your app.
As an example, our waitlist is run on Mason and we inject custom callbacks directly into the feature:
Here it is in React (but this could easily just be HTML with our CDN as well):
"
import { ForgotPassword as MasonWaitlist } from 'mason-library';
...
< MasonWaitlist id={this.props.waitlistId} willSendData={this.props.willSendData} / >"
@patrickjmq definitely. we're certainly mindful of the long history of attempts for this type of product, and the high bar for usability and utility. it's hard to create something more powerful and efficient than writing code, but we think the tools are finally mature enough to make it possible.
@thomasmclaughlin You're speaking my language. Web development is such a pain now with the need to understand a billion and one different scaffolding patterns to build anything. Platform lock in is real, you seem like you are coming at the problem with the exact same set of pain points that I (and many other) feel today.
Beyond excited for this, hopefully I clicks with me when I get to use it because if it does, i'll be evangelising the hell out of it.
@kareem_sabri I'm really rooting for you guys with this, from the noises i'm hearing it sounds like you might have the solution pretty much every dev has been looking for. I've subscribed to this and will be following with greeeeat interest.
@patrickjmq Thanks Patrick - we're happy to have you rooting for us. We're coming at this from a developer's perspective by trying to reduce repetitive coding of utility UI and long or overly technical update and deployment processes for trivial UI updates. Some more detail is in our docs http://docs.trymason.com/
Shoot me an email at kareem [at] trymason [dot] com if you're interested in testing out the product, it sounds like you've thought about this problem a lot.
Hello Product Hunt 👋
At Mason, we think there’s a fundamentally better way to build software on the front-end.
Imagine building, designing, and deploying multiple front-end experiences—a brand-new login flow complete with two-factor authorization and SSO; a custom sign-up experience with unique fields and social sign-in; a stunning content feed displaying your users’ information—in minutes, then managing it all from one central platform.
With Mason, you can. We’re breaking apart the front-end into discretely functional building blocks that can be assembled to create powerful front-end experiences in products. Mason features are built to live within your codebase.
Drag and drop the components together inside our builder, design them, connect them to your APIs, and publish. Then, collaborate with your team to edit it, all inside Mason. Forget collaborating on prototypes—with Mason, you collaborate on something real, and push changes in real-time rather than waiting for the next deployment cycle.
Companies build better and faster with Mason by centralizing product creation and management while also letting non-technical team members build and manage software.
Mason-built experiences are delivered on-demand and don't engage unless called, reducing the scale a system has to handle and improving reliability and performance.
With Mason, enterprises can manage and deliver all their front-end experiences from one central location. The hot editing feature lets teams easily apply new styles across all deployed components in real-time. And it’s secure by design—Mason sends data via an end-to-end HTTPS encrypted transaction without ever hosting it.
We’re powering the front-end revolution, and we hope you’ll join us. Questions? Happy to answer them in the comments! Thanks!
@airlabs_io Hey Chris -- absolutely! We'd love to have you try us out. We're letting folks in off the waiting list as quickly as we can and you'll be able to try us out to see if we're helpful before committing to anything up front
This is quite interesting and as a frontend developer, my mind is overflowing with questions. I have a bit of trouble wrapping my head around exactly how Mason works (although the docs help somewhat), e.g.
- How does this integrate into unit/E2E testing workflows and CI/CD?
- If you can publish updates outside of the typical deployment pipeline, how do you avoid introducing runtime bugs between the components and the rest of the codebase?
- Are you using iframes, shadow DOM or something else for embedding the components? If not, wouldn't unintentional style overrides be a major hassle?
- It seems like there's only 3 callbacks supported in the component API (willFetchData, willSendData, didReceiveData); are data not meant to be passed between components but server-to-server?
Kudos for taking on the challenge though, modern frontend dev is a rabbithole that goes deep and anything to make it more accessible is a welcome change! 🐇
@laander1901 Great questions -- thank you!
- How does this integrate into unit/E2E testing workflows and CI/CD?
Mason features sit within your codebase so they can be tested just like any other line of code. A lot of our own app is powered by Mason features and we test the Mason parts and the custom code parts the same. Drop me an email at tom@trymason.com and I'll share a few test cases we have in production today (we're running Jest and CircleCI, but you can swap for whatever testing / CI flow you use)
- If you can publish updates outside of the typical deployment pipeline, how do you avoid introducing runtime bugs between the components and the rest of the codebase?
Every Mason feature is a self contained bit of functionality that just does its own job really well, and nothing else. There won't be any side effects of dropping our features in alongside the rest of your code since all of the logic is self contained in the feature and all of your styles are uniquely namespaced to avoid any conflicts. It really just... works :) *But* if you do make a mistake, you can make edits in the Mason builder that show up live instantaneously after you publish. Mistakes do happen, but with Mason you don't need to wait to deploy a hotfix to make changes anymore.
- Are you using iframes, shadow DOM or something else for embedding the components? If not, wouldn't unintentional style overrides be a major hassle?
We uniquely namespace all styles for each feature you're using in your app and generate a custom stylesheet that won't conflict with any existing styles elsewhere in your app. All you do is drop in the Mason feature(s) with their unique IDs and on page load our API injects all of the styles and logic to make that feature functional. We package up all styles and JS for you and inject directly into the DOM so there's no iframe hackiness or anything like that. Our approach makes it possible to drop Mason features into virtually any codebase without unintended side effects.
- It seems like there's only 3 callbacks supported in the component API (willFetchData, willSendData, didReceiveData); are data not meant to be passed between components but server-to-server?
Our callbacks actually let you do anything with the data coming into or going out of any Mason feature. You can hook into any step in the data transfer to modify data, restructure it on the fly, write it to a store, send it to your server, or use it anywhere else in your application. Think of those callbacks as hooks into every meaningful step of the data transfer where you can use that data however you'd like, just like you could in custom code. Without the headaches of rebuilding it from scratch of course :)
@laander1901 great questions. Tom covered a lot of it but I wanted to add a couple points.
- If you can publish updates outside of the typical deployment pipeline, how do you avoid introducing runtime bugs between the components and the rest of the codebase?
we support a draft/publish workflow, like a blog. as owner, you can test your pre-published modifications in your production codebase while your users are using the published/tested version.
- It seems like there's only 3 callbacks supported in the component API (willFetchData, willSendData, didReceiveData); are data not meant to be passed between components but server-to-server?
more callbacks are coming soon. providing data directly on the client is definitely in the works.
@thomasmclaughlin I had a lot of the same reservations as @laander1901 and gave you an upvote after reading your detailed reply. Which made me curious, your marketing seems targeted toward Product Mangers, but it seems like you might also direct a bit more clarity for those stubborn devs (like us) that aren’t as easily convinced. Cheers to an awesome idea and execution so far!
Product Hunt