V2.0.1 - 2024.08.02
Announcing the latest product update, version 2.0.1, released on August 2nd, 2024.
Introduction
We've made major updates on canvas, improving the user experience, design consistency and ease of use in our editor.
Update Summary
New Canvas
Updated the canvas engine for significantly improved performance.
Adjusted default and selected styles for all components.
Added top toolbars for pages and components with common operations.
Configuration Bar Optimization
The left sidebar now supports searching component lists, right-click to copy, and delete multi-selection.
Displays all breakpoints in multi-breakpoint mode.
When a component has a popup configured, the left sidebar allows selection and editing of the popup.
The right sidebar hierarchy is optimized to "Design," "Data," and "Interaction".
Added text paragraph indent, letter spacing, and separate border and corner radius settings.
Deployment Optimization
Moved the original "Preview" entry into "Publish", making it easier to manage your web app's deployment .
Users can deploy changes immediately after modifying backend configurations, with all changes displayed in the backend update panel.
Condition Container, and Divider Component Optimization
The condition container's now allows direct selection of the child container, separate configuration of size, style, etc. It also supports editing in the focus mode and switching between different child views in the canvas.
Added "solid line" and "dash line" styles to the divider.
Shortcuts
Added 42 shortcuts for general component operations, selection, movement, and canvas panel zooming.
Detailed Update
Left Sidebar
Updates
Supports searching component lists.
Supports locating components by clicking after search.
Supports right-click to copy/delete after multi-selection on pages.
Supports dragging and sorting pages.
Displays all breakpoint content in multi-breakpoint mode.
When a component has a popup configured, the left sidebar allows selection and editing the popup.
Distinguishes components positioned as "relative" and "absolute/fixed."
Adjustments
Merged the original switching Tab and clicking Icon entries into one, placed at the top of the left sidebar.
Display Sub-containers When Selected
When a component with sub-containers is selected, the left sidebar displays the relationship.
Code Component Entry Adjustment
Canvas
Updates
Supports switching between multi/single breakpoint editing modes.
Supports dragging and adding components to any position in the target container.
Supports direct selection and editing of the innermost component at the pointer position.
Displays more information and shortcut operations when a component is selected.
Select the parent, edit variant and delete.
Adjust the size of the component
Displays horizontal, vertical center, and edge alignment guides when dragging components positioned as "absolute."
Right Sidebar
Updates
Text paragraph indent, letter spacing.
Separate border settings.
Adjustments
Labels and Content Adjustments
Added style configuration (named according to the current selection type) at the top under "Design."
Renamed the original "Content" label to "Data." This label now only supports configuring declared data-related items, with other configurations moved to "Design" - style configuration."
Renamed the original "Interaction" label to "Action." This label now only supports configuring actions, with all content under the original "Component" moved to "Design".
Animation Entry Position Adjustment
Moved the animation entry from "Interaction" to "Design."
State (formerly Variant) Entry Position Adjustment
Renamed "Variant" to "State."
Entry changes from "Interaction" - "Animation" - "Hover" - "Effect" to "Design" - "Style Configuration."
Margins and Padding
Changed from default display to manual addition or removal.
Supports simultaneous configuration of left and right, top and bottom margins.
Max/Min Width Settings
Changed from default display to manual addition or removal.
Layout
Combined "Start," "Center," and "End" in distribution with alignment configuration to form one configuration item.
Rearranged structure.
Layer Styles
Renamed "Layer Styles" to "Z Index" and moved to "Position."
Background Blur
Moved the entry to "Style."
Configuration supports manual addition and removal.
Components
Updated default styles for all components.
Condition Container
Concept Adjustment
The parent container is now a concept, unselectable and uneditable.
Child Container Configuration
Supports direct selection of child containers, allowing separate configuration of size, style, etc.
Focus Mode
Supports entering focus mode through toolbar entry or shortcut (Cmd/Ctrl + Return/Enter) for configuration.
Distinguishing Parent/Child Container Operations
Distinguishes copy, cut, copy, delete operations for child and parent containers.
Adding and Switching Child Containers
i. Toolbar ii. Right Sidebar iii. Condition Popup
Condition Configuration
Supports simultaneous configuration of all child container conditions.
Tabs
Toolbar
Supports switching tabs in the toolbar.
Configuration
Supports directly selecting and editing different tab content in the canvas.
Focus Mode
Supports entering focus mode through toolbar entry or shortcut (Cmd/Ctrl + Return/Enter) for configuration.
Select Views
Toolbar
Distinguishes configuration and preview areas, supports direct selection and editing of the "selected" and "unselected" states of the tag.
Lists/Horizontal Lists
Configuration
Distinguishes configuration and preview areas, supports direct selection and editing of the "selected" and "unselected" states of the tag.
Navigation Bar
Publish
Moved the original "Preview" entry into "Publish," forming an integrated web process for centralized management.
Entry Adjustment Style Adjustment
Error Reporting
Changed from always present to appearing when there is an error.
Shortcuts
Add Component - Option/Alt + C
Measure Distance - Option/Alt
Proportional Scaling - Shift + Drag
Select Child - Return/Enter; Select Parent - Shift + Return/Enter
Select the Next Component at the Same Level - Tab; Select the Previous Component at the Same Level - Shift + Tab (according to the left sidebar order)
Move Component to Top - ]; Move Component to Bottom - [
Move Component Up One Layer - Cmd/Ctrl + ]; Move Component Down One Layer - Cmd/Ctrl + [ (only supports same-level movement)
Move Component in Any Direction (relative layout adjusts component order according to layout direction) - Arrow Keys
More shortcuts can be viewed or searched in the shortcut popup.
Future Updates
Support for Multi-select Editing
More Powerful Variant Function
Richer Breakpoint Capabilities
Feedback Channels
If you have any questions or suggestions, feel free to provide feedback here. Your report will be immediately get fixed by our team.
About Momen
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
Last updated
