←Related: Vieware
Some Figma over browser on enterprise production components with VSCode and DevTools
aka yet another Visual Basic IDE for web, Web Constructor, Bret V. ecstasy, React DS Visual constructor
Fast code-based layout and simple edits right in the browser in a dev environment on existing code for managers, users and programmers for the future world of strong system design. In it, the development of each feature no longer goes through static drawing in photoshop/sketch/figma.
The final step in the evolution when web framework, DevTools IDE and prototyping tool merge together. Now real react components and data are brought into prototyping tools, and visual components are made more similar (Figma variants).
There are a lot of visual and low/no-code site builders, CRUD's and other similar tools, but they are not suitable for production, because they do not use the design system approach, tokens, and also either do not allow you to change the code by hand at all, or stop functioning after changing it in the places of changes (for example, visual GUI builders in environments like Visual Basic and .NET, adding a loop to generate calculator buttons disables the visual representation of this window).
thumb
In the developer mode of the site, a hotkey opens a panel of all primitive components (buttons, tooltips, controls, etc.) with categorization and search. On the page, all container elements (those with children), components and their render functions smoothly increase indentation and highlight their borders.
The most interesting are layout containers: Flow (flexbox component), Grid, and grouping containers: div, span
Shadow el. Components marked as shadow do not expand their structure, for example buttons and other basic components from libraries (mui, sun, components/common ( common application components), pages/*/components). Common components of the web application and individual pages are edited in the test bench (the application in the browser is replaced by a test bench, which presents one component or several clones of it with different specified propami).
Drag'n'drop. When dragging a new component from the sidebar, the target container element is additionally highlighted
The active element above it compactly displays its name, goto def and a few basic settings: For example variant (For Flow it will be a right or down arrow, And for button it will be the format of its display as a select: outline|text|contained). These and other props are also displayed in the sidebar as in Visual Basic. There you can also see comments to them or go to live docs/show case+Api docs Or to design system guides.
Sidepanel. The component's props in the sidebar can be customized based on the type. For example, booleans can be switched by checkbox. Access substitution of state and props with tree of available props with types, sample data and comments from code. Functional event props (e.g. onClick) allow you to create a handler stub or jump into an existing one (in IDE on computer or integrated VSCode online)
In the sidebar besides 1) component bank and 2) properties of the active element there is 3) data mocks bank (both for the whole page and fragments), There you can also isolate the active element by placing it in a testbench, where you can flexibly change the input data and watch several components with different states at the same time.
NO. Widths and heights of elements cannot be changed. But you can substitute css variables or state/props in the sidebar. You can't place elements in an arbitrary location through the constructor either. Browser layout flow is used
Conds. Elements shown by condition are grayed out with stubs, you can see the condition in them.
Loops. Loops are also shown, you can ask to display only the first element
Hot. Modules are replaced by hot when code is changed by hand
Proxied by createElement or use react devtools api to map DOM elements to components and elements in code.
Code Instrumented (AST transformations in Babel) to find also render condition functions and loops
Mapping from specific elements in the DOM to locations in the code is composed. To do this, a component file is searched for, render functions and elements are traced in it
The minimum code corresponding to each component is generated based on its isRequired prop-tips. It is possible to customize this for complex cases and add multiple template options, then drag and drop from the sidebar will offer a choice.
All clickable elements lose their handlers, clicks are handled differently: to focus elements in WYSIWYG
Components can declare which elements can be placed inside children, as well as their number. For example, this is needed in Table, Attrs, Tooltip, where children are not handled in a standard way.
Changes are immediately translated into code
You can use other component libraries as well. You will need to adapt at least the mapping of elements in the sidebar to them.