webstudio-is / webstudio Goto Github PK
View Code? Open in Web Editor NEWOpen Source alternative to Webflow, check out our CMS launch https://webstudio.is/cms
Home Page: https://webstudio.is
License: GNU Affero General Public License v3.0
Open Source alternative to Webflow, check out our CMS launch https://webstudio.is/cms
Home Page: https://webstudio.is
License: GNU Affero General Public License v3.0
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 :
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
Technically it's still going to be the same code-component, but it's going to have predefined styles and props.
Some instances can't accept children at all (Input), some only accept specific components, e.g. div can't be inside paragraph
When user drags & drops a new instance, animation bounces back, which makes a user confused if they added the instance
When a user accesses a published site, it should be served from the Cloudflare worker. There is a number of open questions:
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.
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
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.
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:
Those settings need to enable the user to:
Screenshot examples from Webflow UI
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
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.
As a designer persona or as a developer persona I want to be able to log in to get access to my projects
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
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.
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.
There is a lot of things to consider when building a realtime multiplayer UI, here are a few:
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!
The following is the spec for the input component that should have the general features and be able to support the extensions where needed.
Should be able to input any arbitrary value with features that make enhance the experience.
see chrome dev tools as an example
should show a arrow icon when the mouse is over a unit.
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
- destructive implementation: spans/divs within a rich "input". (this is what chrome dev-tools uses)
- non-destructive implementation: use
measureText
,style.cusror
andmousemove
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 updatestyle.cursor
based on that.
should autocomplete valid property values as specified for that instance of the input.
Should be able to support the following add-ons depending on the input instance
an example of masking imask.js.org
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.
When tree is nested, you don't see which element is highlighted, because it is collapsed
Lets make this a place to discuss what we want the style panel UI to have and how it should look
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.
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
We should show a CSS block representing the style of the selected element as an editable CSS text, because
We should provide user with all possible autocomplete UIs:
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
<meta content="" property=""/>
shared/documents/Canvas.tsx
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
We have yarn checks
command that runs static checks and unit tests and we shouldn't be merging PRs when it exits with 1
When changing the min-width in breakpoint setting, it should be applied right away and dragging shouldn't be possible below that value
We need the ability to define media queries. There should be a bunch of predefined breakpoints along with the ability to define any breakpoint.
TBC in #29
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)
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 :)
As a user I need a way to upload a picture and use it as a background image or image component source.
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.
I bought wstd.io, we can now publish user sites on <subdomain>.wstd.io
Current outline doesn't work well in multiple cases:
We need to render the outline outside of the component and detect components's position.
When clicking on the property name
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.
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.
When undoing any spacing value, value is undone on canvas but style panel spacing input is not updated
To better understand where the instance is going to drop, we should show a line similar to https://craft.js.org/
Not sure we even need the undo/redo icon buttons, Figma has none and it seems fine, everybody knows that shortcut
The idea is to use csf as a way to describe a component to the designer.
This format should let a component express:
This is a complex topic that needs research and prototyping.
Currently we are collapsing the entire tree, no matter which node was deleted
Otherwise we end up with 2 sidebars, originally from #2
We need to know when we select an instance on the canvas, where that instance is in the hierarchy
@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
We need an ability to copy a component and paste it it anywhere in the tree. It should keep props and styles.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.