webstudio-is/webstudio

🖌 Webstudio Visual Builder

Webstudio is an Open Source Visual Development Platform for developers, designers, and cross-functional teams. You own the data, components, and infrastructure. You can use the hosted version or roll out your own.

Learning Resources

• Blog
• Documentation
• Brand and Product Design
• Contributing Guide for Devs
• Github Discussions
• Wishlist
• Builder Issues Tracker
• Roadmap

Social Media

• Twitter
• Youtube
• Discord

Thanks

Thanks to Lost Pixel for providing the visual testing platform that helps us review UI changes and catch visual regressions.

webstudio's Issues

Breakpoints

We need the ability to define media queries. There should be a bunch of predefined breakpoints along with the ability to define any breakpoint.

• basic breakpoints selector ui
• basic breakpoints editor ui
• render current styles under a default breakpoints
• migrate from instance.style to instance.cssRules
• add breakpoint ref to the styles
• render default breakpoint in the editing interface as non-editable
• save breakpoints changes to db
• ability to add breakpoint
• ability to delete breakpoint
• resize canvas when changing breakpoint
• scale slider for scaling canvas
• width slider for changing width - detect current size, when changing size - change breakpoint?
• automatically assign icons depending on max width and render them in the list and topbar
• add shortcuts
• confirm deletion
• delete styles from that breakpoint
• mark properties in the style panel with the corresponding breakpoint with blue
• add zoom and canvas width to the menu under "view" and show the shortcuts
• initialize with a mobile size of canvas
• constraint the resize to the current breakpoint in design mode, but leave it unconstrained in preview mode
• match breakpoint when detecting inherited value, not just the parent node with the same property (couldn't repro)
• drop position detection on mobile canvas is broken, x value must be wrong
• make the minimum width 200px and default mobile width using some popular resolution
• migration (create breakpoints, use the 0 breakpoint on cssRules)
• adjust landing to look better on 360px
• add breakpoints sync to cli
• add load breakpoints to the rest api
• publish updated landing with new data
• use tree id as a breakpoints entry id in the db
• when publishing copy breakpoints and reference the prod tree id
• update the cli and landing
• why is "$oid": "626fc63909a681e2a912b5a4" in the cssrule.breakpoint
• fix the signup form
• testing notes

TBC in #29

CSS input with values/units autocomplete and drag

The following is the spec for the input component that should have the general features and be able to support the extensions where needed.

General

Should be able to input any arbitrary value with features that make enhance the experience.

unit detection

see chrome dev tools as an example

should show a arrow icon when the mouse is over a unit.

number detection

see chrome dev tools as an example

should show a ew-resize cursor when hovering over a number.

for both of the above we can either

1. destructive implementation: spans/divs within a rich "input". (this is what chrome dev-tools uses)
2. non-destructive implementation: use measureText, style.cusror and mousemove on the native input element to detect and decorate the input without the need for a rich "input". essentially using mouse x-coordinates relative to the input detect whether the mouse is over a unit/number from the current value of the input and update style.cursor based on that.

Auto completion

should autocomplete valid property values as specified for that instance of the input.

Extensions

Should be able to support the following add-ons depending on the input instance

Auto-correct/delimited values

Archived

Should be able to add support for multiple delimited values and masked values such that i.e `10px10px` is `10px 10px` and `10px, 10px` is `10px 10px` essentially should be able to detect correct almost valid values to their valid counterparts and mask any denylisted characters to their counter parts i.e `comma` to `space` if specified.

an example of masking imask.js.org

Expansion control

Archived

Should be able to add a control that based on the delimiter(could be space or comma) can add a value to the input, examples including:

values that can be 1, 2, 3 or 4 values where by each variant is valid in its own right i.e margin: 1px vs margin: 1px 2px vs margin: 1px 2px 3px vs margin: 1px 2px 3px 4px the expansion control would provide a interface for what would otherwise be manually admitted by keyboard.

Known problems

• current bug with dropdown #142

Move content-editable toolbar to workspace-tools and replace content editor with lexical.dev

Currently the toolbar is still inside the canvas/iframe and now we moved outlines into workspace tools and they get rendered on top of the text editing toolbar

Publish to the Edge

When a user accesses a published site, it should be served from the Cloudflare worker. There is a number of open questions:

1. How do we connect a some-site.wstd.io to go to Cloudflare worker and then render a specific site?
2. How do we connect a user's TLD to Cloudflare worker
3. Do we need to deploy to a worker for each site or do we have one worker that uses some kind of cache for each site and serves it? If it's later, how do we build such a cache, and where do we store it. It has to have very quick access from the worker.

Particularly important worker limitation is it can't access a database directly over a socket, if it needs a db access, it would have to do a fetch request.

Local development with designer using local sqllite?

I realized that we could enable running the designer locally, like storybook, but it would also write the changes to a local sqlite instance, so you are actually building it and you don't need a separately hosted Designer instance.

Remove bouncing back animation when dropping a new instance

When user drags & drops a new instance, animation bounces back, which makes a user confused if they added the instance

Implement undo/redo

Not sure we even need the undo/redo icon buttons, Figma has none and it seems fine, everybody knows that shortcut

• delete instance
• insert instance
• reparent instance
• update styles
• update props
• delete prop
• update children

Webstudio UI Design System

We need to improve the design system of webstudio UI itself, especially colors we use, but also everything else in the theme and restyle/finetune all components we use.

AKA make the designer look and feel great :)

Improve working locally with separate repository like sdk

Working on sdk and designer simultanously currently is a nightmare, in the attempt to try and keep SDK in a separate repository, we still need a way to work with it like its same repository.

Yalk could be the solution here, https://github.com/wclr/yalc let try it out

Create a theme editor for design tokens

We want to be able to create a theme for a project that allows to specify theme that will be passed to stitches

We also need the default theme to be predefined and the ability to copy/paste a theme from one project to another project.

Links

• figma tokens plugin https://docs.tokens.studio/

Tasks

• decide where to have the editor and how it will look like
• load the default theme in the theme editor
• enable using the theme tokens from style panel

Changing breakpoint should apply width resizing constraint

When changing the min-width in breakpoint setting, it should be applied right away and dragging shouldn't be possible below that value

Multi-page sites and routing

As a user I want to be able to create multiple pages and leverage the full power of Remix's router, which doesn't need to do the full page reload between pages once loaded and makes it super fast

Todo

• Create prisma model (discussed: {id, projected, data: JSON})
• Create a migration for the production database (using snaplet?)
• Create rest API
• Create data zod schema
• Create db helpers
• Render the panel in the left sidebar
• Render the pages tree using tree component we use in navigator
• Page item has 2 main functions: open the page and open the page settings
• Page item can have a parent
• Page settings should have a few main key/values predefined, the rest should be added by the user with "+" and selected from predefined known list + any key/value user wants that will be rendered <meta content="" property=""/>
• Write a Page component for SDK that will render title/meta and replace the current shared/documents/Canvas.tsx
• Add new page
• Set a page as a home page (only one page can be home and should have path as empty, that's how we can indicate in the db the home page)
• Apply final design

Start writing e2e tests

From my past experience with Cypress and Playwright, I would want us to build on Playwright - cleaner API, Native events over devtools protocol, faster.

We need to start covering basic user interactions first, just to make sure we don't break the basics when releasing.

Tasks

• Write a few basic tests. A feature should have its tests inside the feature folder.
• Setup CI, prevent failing tests from being merged. Should we use github actions?

Enable using REM in breakpoints

Based on this article and this thread the best way to use breakpoints is by using rems.

We should probably just reuse the same control that we use for other numeric values in style panel and enable user to select the unit

API data versioning

When syncing the data from the API, we need to show error if the data is incompatible with the SDK, so that user can update the SDK.

Todo

• provide a version in the api
• save the version in a json created by sync cli
• show error when versions are incompatible

Don't collapse the entire tree when deleting one instance

Currently we are collapsing the entire tree, no matter which node was deleted

Image optimizations

Lets do some research for image optimization service we could use out of the box that would allow us to load any image type over that service from our S3 storage and it would take care of all optimizations, resizing, responsive sizes and serving over a CDN.

Lets find the best service that has also a reasonable price.

Undo spacing doesn't update style panel

When undoing any spacing value, value is undone on canvas but style panel spacing input is not updated

Better instance outline

Current outline doesn't work well in multiple cases:

• component is at the very top (tag gets cut off)
• padding is used (tag shifts)

We need to render the outline outside of the component and detect components's position.

Open the tree automatically when element is selected on the canvas

When tree is nested, you don't see which element is highlighted, because it is collapsed

https://twitter.com/Danny_H_W/status/1506014968147476481

Parametrized components from designer

Right now styles and props of instances on the canvas can't be reused, you have to create a new instance every time and recreated all styles and props.

To create reusable components out of primitive components, which could be composed into complex components, we need

1. Some way to click "create component"
2. Name the component
3. Components Panel that will list all created components
4. When selecting a component from the components panel, it should render only that component on the canvas
5. Can drag a component from components panel same way as with built-in primitive components onto the canvas
6. Changing styles and props on the component view will change them on all instances of that component, except the props and styles that were overwritten on the instance

Technically it's still going to be the same code-component, but it's going to have predefined styles and props.

User authentication

As a designer persona or as a developer persona I want to be able to log in to get access to my projects

Tasks

• research a good way that is i locking us into some service and works well with workers-like environment e.g. https://github.com/sergiodxa/remix-auth

Breadcrumbs under the canvas

We need to know when we select an instance on the canvas, where that instance is in the hierarchy

Ability to change the units of value

Lets say I want to change the height value from px to vh .
Probably a drop down for unit will be helpful here

Explore realtime collaboration

There is a lot of things to consider when building a realtime multiplayer UI, here are a few:

1. DX and State management
   • We are building on top of immer, using immerhin as a Developer facing interface for transactions. This interface results in JSON patches, after that we can decide where to go considering all other aspects.
2. Server architecture
   • How will this work with cloudflare workers type of env and a single container env?
3. Database
   • Can we do that on top of SQLite?
   • RxDB?
4. Conflicts resolution
   • There is various CRDT implementations, e.g. this one works with json patch which is perfect for our immer patches which are essentially json patches
   • There is Automerge
   • Hybrid Logical Clock, Vector Clock
5. Change types:
   • Ephemeral (not important - can be dropped, doesn't need permanent storage)
   • transactional (atomic, very important, has context, needs permanent storage, e.g.: color: was changed to red)
   • blob (non-atomic, e.g. text has changed, no idea what part)
6. Offline-first

Other links

• Figma learnings
• This thread and this podcast episode
• Logux

Autocomplete

In the style panel , currently the values are selected via menu component . Need to replace menu with the select for better UX experience .

The Select component should behave similar to menu component with already working features :

• User should be able to preview on canvas on hover
• User should be able to preview on selection via keyboard
• User should be cancel the changes with escape button
• User should see the dropdown when pressing arrow down

Selected instance and hovered instance outlines may overlap

This bug is also a problem at Webflow

Better style panel UI discussion

Lets make this a place to discuss what we want the style panel UI to have and how it should look

Research interactions and page transitions

Let's research if we can create a UI to enable page transitions with the current browsers made easily https://twitter.com/jaffathecake/status/1524782819431555074 and prepare for the new page transitions API.

I think this API is going to create a major shift in how people build sites, moving the trend back towards multi-page sites with transitions and smaller/faster pages.

Page transition animation in remix is easy because its not reloading the entire site https://twitter.com/buildsghost/status/1492201302423605252

Publish user sites on a separate domain wstd.io

I bought wstd.io, we can now publish user sites on <subdomain>.wstd.io

Explain where the value comes from and allow resetting it

When clicking on the property name

• show a popover that explains the property was defined:
  • inherited from parents
  • set locally
  • token (bound to a token, this will come later once we have done tokens)
• show a link to a full mdn article (we have the links from mdn data)
• ideally show a short simple description (probably has to be written or copied from mdn partially) - lets leave it for later
• reset button that will unset the local value and the value becomes either inherited or defined by default styles or browser styles

Since we don't have designs for it yet, I am attaching examples from webflow. We will have a new design later, it seems easy to change.

Provide code-components to the designer

Lets research the best possible way to provide a code-based component written by a developer, to the Designer UI, so that it can be used on the canvas.

Show a drop indicator

To better understand where the instance is going to drop, we should show a line similar to https://craft.js.org/

Support Component Story Format (CSF)

The idea is to use csf as a way to describe a component to the designer.

This format should let a component express:

• controls in the properties and style panels
• supported values for style and properties
• enable designer render any component with a story out of the box

This is a complex topic that needs research and prototyping.

Tasks

• add stories to primitives and describe all available properties for each component (includes all available html properties)
• make sure storybook can display those stories
• render autocomplete inputs in props panel using options and controls from stories
• think about how predefined styles on each component could also be expressed via CSF
• support boolean prop types
• support numeric prop types
• use docgen to generate argTypes
• improve types if needed for primitives to generate good argTypes
• better ux that lets user discover properties

PRs

• #53
• webstudio-is/webstudio-sdk#3

Unable to delete input element

So I tried to place 2 elements , button and input . Now deleing the button was easy by just selecting the button and hit delete .

But for input element , it is basically deleting the text inside the input element but not the input element itself.

So we need to somehow figure out are we deleting the contents of input or the input itself .

( PS . I tested this on the brave browser in m1 mac air if it is relevant)

Prevent merging PR's that fail checks

We have yarn checks command that runs static checks and unit tests and we shouldn't be merging PRs when it exits with 1

Highlighting text opens overlay only some of the time

Screen.Recording.2022-06-14.at.7.17.28.AM.mov

Heading always rendered as <h1>

Right now, the heading element is always rendered as an h1 tag.

There really shouldn't be more than one h1 tag on a page. The user should be able to specify a level 1 - 6 which results in an h1-h6 tag. Otherwise, maybe programmatically derive heading levels based on nested sections or something like that.

Close the left sidebar when drag on the canvas starts

Otherwise we end up with 2 sidebars, originally from #2

Migrate to an SQL Database

Use cases

• As a Webstudio hosted service, I need a scalable and cheap alternative to MongoDB.
• As an OSS contributor to Webstudio, I want an easy way to install the Designer and work with it locally
• As a Webstudio user I want run webstudio locally (offline in some future).

Options

• SQLite for a local app
• supabase (PostgreSQL) for hosted service, deno workers in the same cluster would be also 🔥
• planetscale (MySQL)
• D1 cloudflare
• Others?

Todo

• weigh in pros and cons of each database
• do we care if its MySQL vs PostgreSQL when using prisma?
• how hard is it to stay compatible with any of them, including SQLite?
• who offers the best scalable pricing?
• who offers hosting at the edge?
• who works with workers well? Problem with workers is they will create a lot of socket connections. Postgress has pgbouncer what is planetscale using for MySQL to scale it?

Assets manager

As a user I need a way to upload a picture and use it as a background image or image component source.

Tasks

• upload UI - Only allow images
• management UI
  • Remove assets
  • List assets by type
  • Add image to website
• file system upload for usage locally or in a docker
• upload to S3/R2 for hosted version

Searchbar for CSS properties

Discussed in #5

^{Originally posted by mo-lab March 22, 2022}
hi loved the product
I think a search bar for CSS attributes might be helpful

right in this section

Contributing

@kof could you write a little bit about the projects tech for contributors, including guide for local development and your vision for how all the parts of webstudio fit together including the webstudio-designer.

A roadmap with the necessary features, and bonus enhancements you think might be cool to have would be useful too. an example

Arrow keys should change numeric inputs

Numeric inputs like font size should react to arrow keys and change the values, like we are used to in browser dev tools, unless arrow keys are already used to show the autocomplete

Copy-pasting a component

We need an ability to copy a component and paste it it anywhere in the tree. It should keep props and styles.

Linked CSS editor

We should show a CSS block representing the style of the selected element as an editable CSS text, because

1. It lets a user with CSS skills see what is actually defined in a text form, which is potentially much shorter than UI
2. User can edit that CSS as text, when they know what they need to change
3. User can copy/paste that - enables also cloning styles across projects
4. User can learn CSS by looking at the CSS text generated by the UI and vice-versa

We should provide user with all possible autocomplete UIs:

• property name autcomplete
• CSS keywords autocomplete
• unit autocomplete

Todo

• Render the CSS rule style block preview as a CSS section (no selectors/media queries, just the block)
• When editing, reflect the changes in the UI
• When editing, update on the canvas
• Changes from style panel should automatically reflect in the editor

Drop indicators

Although there is an obvious hierarchy in the tree section, there's no indicator where the element will be placed when dropped (above, below, inside)

A simple horizontal line indicating where the element will be dropped would be useful!

Focus link href property when link is being added to the canvas

When a link is either added from the menu or from the overlay there is no way to change the link settings.

At minimum there should be a way to add a URL in the properties, and the properties panel should open and highlight when a link is first created.

In the future links need:

• settings overlay that can be opened from the canvas
• a unique section in the properties that shows conditionally when a link element is selected

Those settings need to enable the user to:

• add different types of links: email, phone, URL, section links, or internal page links
• the page link option should show all pages in the current project as a dropdown
• the URL link option should have a "open in a new tab" checkbox
• the section link option could show all elements with a section tag, plus a hint to add a section tag (with unique ID?) to enable the option to link to a section

Screenshot examples from Webflow UI

Waiting for

• #24

Undo & Redo functionality

Currently if the webstudio designer incorrectly places an item at the top of the screen you have to go find that element and remove it. A simple undo would be useful.

This is important early in alpha because the webstudio designer is going to be making a lot more mistakes on drop areas early on.

Restrict dropping instances into certain instance types

Some instances can't accept children at all (Input), some only accept specific components, e.g. div can't be inside paragraph

Todo

• prevent inserting into components which don't accept an instance
• outline during drag the instance that will accept the insteance instead of the one that can't
• when single-click adding an instance while the target instance can't accept it automatically select the closest parent instance that can (duplicate issue )