Let me show you how an open-source visual development tool will eliminate the friction between developers and designers, whether you are building a small landing page or a complex web application.
Goals
It is critical to understand the goals before jumping into tech because goals are the main driver behind all technical decisions.
- We need a visual development tool that can harness the full power of the web platform by embracing its foundation: CSS and HTML.
- We must give ownership over content back to the user.
- We want to empower designers to contribute directly to the software by manipulating production code visually, no matter how complex that software may be.
Embracing web foundation
The purpose of abstraction is not to be vague, but to create a new semantic level in which one can be absolutely precise.
-- Ew Dijkstra
We want a tool that lets you express your product visually more precisely than using text. Code in text form depends on many external factors: build tools, interpreters, compilers, etc., making writing code for many cases way harder than it should be.
We want you to manipulate the result while staying true to web fundamentals. You are working with the same CSS properties and HTML elements as if you are writing code, and you will be learning the web fundamentals while building visually.
Visual object manipulation is a higher-level abstraction that enables building for the web even if you have no coding skills.
Fixing ownership
We all have jumped on the train using services that make it easy to publish on the web, but slowly we have all realized that we are not in control over our content anymore.
Several problems have emerged: expensive hosting, unwanted paywalls, government control, technical limitations.
Today, we can easily publish while avoiding all those problems by decoupling content creation and publishing.
Services like Vercel, Netlify, Fly, Cloudflare, and others make it easy to publish on the web without worrying about uptime or infrastructure maintenance and scalability. With Webstudio, you can publish to any infrastructure and stay in complete control. You could even publish on a blockchain. Thanks to Remix, this is already easy from the CLI and will be a one-click action directly from Webstudio later on.
Open source is a requirement
To truly fix the ownership and give creators control over the tool, it is not enough to provide API and SDK. There is still a vendor lock-in in place because without the Designer or infrastructure, you can't continue development.
Making it open-source provides the maximum guarantee that the tool won't suddenly become restrictive or expensive. It is how we say that you can trust us because we keep no leverage. Webstudio can be seen as an open-source alternative to Webflow, though it is much more than that.
Fixing collaboration
Collaboration between design and business logic is still in bad shape. There are no great tools where a designer can build and maintain the design without a handover to a developer in complex projects.
Today designers build mostly static pictures and then hand them over to developers to turn them into code. In some tools like Figma, you can even build interactions and animations, but at the end of the day, it is still a mockup, not a real product. It improves communication but doesn't remove design handoff entirely.
Removing handoff is partially possible for marketing sites using tools like Webflow, but it's very limited in its capabilities, has a complete vendor lock-in, and is quite expensive on top of that.
We need a tool that decouples design from backend and business logic but still integrates with custom code easily.
Webstudio landing site is built with Webstudio
Webstudio is right now in the alpha stage, and it is so alpha that I don't recommend using it in production. It has lots of bugs and lots of missing essential features. That's why the landing site is also very basic, but it demonstrates very powerful architecture. The same architecture would allow me to build a site of virtually any complexity.
I built this landing site visually in Webstudio Designer, then generated a standalone Remix app, synchronized the data from Designer using Webstudio CLI, rendered the site inside Remix using Webstudio SDK and published it on Vercel as a serverless function. 😅 There is a lot to unpack there!
Building landing site visually
Whenever I write CSS in text form and then run it in the browser until it looks the way I want is a serious waste of time. Most of the time, I try to work this around by writing CSS directly in the browser dev tools first and then copy-paste them into the code.
Despite the Webstudio style panel is not ready by a long shot - it felt nice to build it that way, even as a developer who writes CSS as part of the job.
Webstudio style panel is an alternative to browser dev tool for CSS that produces production-ready CSS.
Integration with a custom codebase
I needed to integrate with a custom codebase instead of just publishing the site straight from Designer because I have a signup form that sends data to Notion. In the future, this will be possible using GraphQL bindings, but there will be many other reasons to integrate with a custom codebase, so this is a good proof of concept.
I generated a Remix app by running npx create-remix@latest which guided me through all options. I was going to deploy to Vercel, so I selected Vercel as a deployment target.
$ npx create-remix@latest
💿 Welcome to Remix! Let's get you set up with a new project.
? Where would you like to create your app? ./
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets.
Express Server
Architect (AWS Lambda)
Fly.io
Netlify
❯ Vercel
Cloudflare Pages
Cloudflare Workers
Sync the data
The first step is to download the data from Designer API. This is where Webstudio CLI helps - a simple command wstd sync <project id> --host https://alpha.webstudio.is downloads the data as JSON files and puts it in a local .webstudio folder. You don't have to worry about a particular data format because SDK components already know how to render it, so you only have to work with standard React components.
{
"id": "6235c46edd57c1fddb8ee7ed",
"root": {
"component": "Box",
"id": "6233a4152e5d952bb6fb2118",
"style": {
"fontFamily": {
"type": "keyword",
"value": "-apple-system, system-ui, Arial"
},
"fontSize": {
"type": "unit",
"unit": "px",
"value": 14
}
},
"children": [
{
"component": "Box",
"id": "6230f40d9b138da42f55d3ed",
"style": {
"paddingBottom": {
"type": "unit",
"unit": "px",
"value": 30
}
}
}
]
}
}
The data is simply provided to Remix's loader by importing JSON files.
export const loader = async () => {
return await import(".webstudio");
};
Render components
The next step is to render that data. For this, I used Webstudio SDK that provides all necessary APIs to render React components in any React application as well as components to render a Remix Document.
I am not bound to this specific set of APIs, and I am free to render it with any other framework or just a different set of components. Over time Webstudio will provide adapters for different DOM and CSS rendering frameworks, from Sass and your favorite CSS-in-JS library to React or Vue.
At the moment, SDK is using React and Stitches for rendering, but we look forward to a future where we can render without a framework at all and support all popular frameworks as well.
Custom logic
Remember I mentioned I needed custom code to send email from signup form to notion? We pass our custom Component to the Root component, and we override the SignupForm and SignupSuccess components. Inside those override components, we handle all form submission states and show the success message.
import {
Root,
useUserProps,
WrapperComponent,
} from "@webstudio-is/sdk";
import { useLoaderData } from "remix";
import { SignupForm, SignupSuccess } from "~/signup/components";
const Component = (props) => {
const { override } = useUserProps(props.id);
if (override === "SignupForm") {
return <SignupForm {...props} />;
}
if (override === "SignupSuccess") {
return <SignupSuccess {...props} />;
}
return <WrapperComponent {...props} />;
};
export default function Index() {
const data = useLoaderData();
return <Root data={data} Component={Component} />;
}
Publishing
At this point, publishing is a no-brainer. You can push to git and setup Vercel to import from it or publish directly from CLI npm i -g vercel && vercel.
Next time you change design in Webstudio you have to run the sync CLI locally and publish the changes from your computer. In the future we will have an optional automation that will let you either publish automatically directly from Webstudio or create a Pull Request with changes and a link to preview, so that developers can review it before publishing.
Become part of this mission
Please don't hesitate to share your thoughts and ideas on github. Also don't forget to give it a star, because this is how we know you liked what you saw.
Top comments (1)
Congrats! I'm excited to follow along. Coincidentally I have also been thinking of making something similar. In particular, I want to build a design UI on top of my custom graphical HTML system: lume.io.
Maybe we can collaborate eventually!