Wappler 7.9.1 Released

Wappler General Announcements
1

Wappler 7.9.1 Released

Check the new Wappler site at https://wappler.io/
Read latest Wappler Docs
and download Wappler 7.9.1 from your Account Dashboard

Or just do “check for updates” on the Wappler tray icon for automatic install!

What's New

In this Wappler update we are introducing our biggest Bootstrap 5 authoring improvement yet, with the all-new Bootstrap 5 Semantic library as the main highlight. It brings a much richer and more descriptive way to build real pages visually, with high-level semantic components, App Connect-aware dynamic patterns, stronger hierarchy, and clearer structure throughout the editor.

On top of that we have greatly expanded the Bootstrap 5 Blocks library with many new starter blocks, semantic roles, universal theme-ready layouts, and smarter cross-server-model insertion.

Pages Manager also gets many more polished starter choices, while the Structure panel, framework setup, design tools, Git Manager, Demo Projects HQ, and Wappler Tours are all improved to make the full workflow feel faster, clearer, and more connected.

Also we have added full support for FontAwesome 7 icons now.

Bootstrap 5 Semantic Library

  • New "Bootstrap 5 Semantic" rule library with 109 high-level rules across 12 families: page sections, layout primitives, navigation, marketing & content, status & data, forms, FAQ, app shell, real-time & social, productivity boards, data & lists, ecommerce, marketing extras, auth.
  • New 24 App Connect dynamic-data semantic rules wrap the most common dmx-* patterns (data list / card grid / data table, master-detail, conditional region, empty-state / loading-skeleton / error-alert, search / toggle / chip filters, Server Connect form, KPI tile, pagination, infinite list, realtime badge, notification / comment / chat feeds, kanban lane, calendar feed, upload card) so dynamic, server-driven sections become first-class Structure-panel nodes.
  • Each semantic node exposes rich, typed properties: variant droplists, color tones, App Connect bindings, and the shared BS5 spacing / border / display / flex property groups.
  • Top-down hierarchy enforcement (priority 300, opt-in via wappler-role): only page-level entry points appear at body level, every other rule is reachable through its parent's curated children menu, anyParent: true reserved for true inline atoms.
  • Pages Manager layout/content split mirrored exactly across Node EJS, PHP and ASP.NET.
  • Semantic Bootstrap 5 components now feel more descriptive and editor-friendly, with richer labels shown across a much wider set of reusable UI patterns.
  • Wappler now does a better job of turning real content into readable component names, helping users scan complex pages faster and with less guesswork.
  • Brand components behave more predictably, so editing brand text and brand identity inside semantic layouts feels more polished and dependable.

Pages Manager

  • Pages Manager now offers a much broader set of Bootstrap 5 starter choices when creating new pages, making it faster to begin from a polished layout, page shell, or ready-made section instead of starting from scratch.
  • Starter choices are now better matched to the type of page being created, so layout pages, content pages, and partials surface more relevant Bootstrap 5 starting points.
  • Starter previews now use each block’s own thumbnail, making it easier to recognize and choose the right design before creating the page.
  • Pages Manager thumbnail rendering has been improved for Bootstrap 5 starter previews, with better handling for SVG thumbnails and mixed preview types.
  • Page tiles in the Pages Manager now have more consistent sizing, alignment, and hover styling, resulting in a cleaner and more polished browsing experience.
  • Bootstrap 5 Layout Starters - The full Bootstrap 5 Layouts family is now available as layout starters, including app, marketing, blog, docs, landing, and mobile-style shells.
  • Bootstrap 5 Content Starters - Many more Bootstrap 5 blocks are now available as content page starters, including additional dashboard, authentication, forms, ecommerce, blog, tables, UI, and content-focused page designs.
  • Improve the full pages generation for NodeJS to generate the right routing

Bootstrap 5 Blocks

  • Semantic roles on every block, Pages Manager-aligned layouts, server-model-aware insertion, 56 new blocks
  • Every block now carries wappler-role on its root .wappler-block element so insertion produces a fully semantic Structure tree out of the box.
  • Inner wrappers tagged with named roles too (section-header, lead-paragraph, eyebrow, caption, surface, framed-image, media-frame, action-row, meta-row, chip-row, stat-group, data-row, brand, nav-links, social-links, link-list, search-bar, form-actions, breadcrumb-trail, kanban-card, sidebar-link, activity-item, faq-item, step-item, timeline-step, notification-item, cart-line, ...).
  • 227 blocks · 1688 wappler-role attributes · 104 distinct roles in use — 100% of the practical static-block role surface.
  • Generator-driven role pipeline: filename-prefix root role injector + JSDOM-based inner role tagger keep every block tagged automatically; manual overrides preserved on re-runs.
  • New Pages Manager-aligned Layouts_* family (Layouts_admin_dark, Layouts_app_main, Layouts_blog_sidebar, Layouts_docs_three_col, Layouts_landing_sticky_footer, Layouts_marketing_main, Layouts_pwa_mobile) with the canonical Node EJS content-slot directive placed directly inside as the only child.
  • Server-model-aware insertion: the canonical Node directive <%- await include(content, locals); %> is transparently rewritten to <?php echo dmxRouteContent(); ?> for PHP, <%= dmxRouteContent() %> for ASP.NET, and stripped for client-only / mobile (app) projects, so a single set of layout shells drives a working layout file on every supported backend.
  • 5 new semantic primitives added to support the new tagging: bs5-eyebrow, bs5-lead-paragraph, bs5-caption, bs5-framed-image, bs5-media-frame.
  • 56 new blocks across authentication (Auth_login_centered, Auth_login_modal, Auth_login_dropdown, Auth_login_register_tabs, Auth_login_social, Auth_register_social), navigation (Navbar_simple, Navbar_dark_dropdown, Navbar_mega_menu, Navbar_offcanvas, Navbar_search, Navbar_transparent_overlay, Navbar_utility_top, Navbar_with_announcement, Navigation_breadcrumbs, Navigation_filter_bar, Navigation_tab_strip), dashboards (Dashboard_app_shell, Dashboard_kanban_board, Dashboard_activity_feed, Dashboard_saved_reports), content (Contents_chat_thread, Contents_comment_thread, Contents_event_list, Contents_faq_accordion, Contents_keyboard_shortcuts, Contents_layout_primitives, Contents_logo_cloud, Contents_timeline_steps, Blog_post_layout), footers (Footer_app_download, Footer_dark_mega, Footer_minimal, Footer_newsletter_top, Footer_sticky), forms (Forms_field_groups, Forms_steps_wizard), tables (Tables_admin_data_table), pricing (Pricing_compare_summary), ecommerce (Ecommerce_cart_summary), modals (Modal_confirm_destructive), sidebars (Sidebar_collapsible, Sidebar_compact_icons), features (Features_empty_state, Features_feature_grid), action sections (Action_announcement_banner, Action_cookie_banner, Action_rating_share), hero (Hero_split_video) and the 7 layout shells listed above.
  • All new blocks ship with matching 320x240 neutral SVG thumbnails, realistic seeded sample data, App Connect bindings, and the right semantic root + inner roles.
  • Form blocks now consistently point at conventional Server Connect URLs (/api/auth/login, /api/auth/register, /api/contact/send, /api/newsletter/subscribe, ...) using is="dmx-serverconnect-form" with lastError + state.executing wired in.
  • Generator (Icons_Source/generate_bs5_BlocksIcons.js) reads root wappler-role from each block HTML (block HTML is the source of truth) and preserves server-side directives (<% %>, <?php ?>, <%= %>) through JSDOM normalization.
  • Add descriptive titles to the Wappler blocks to be shown in the structure panel
  • Modernize all bootstrap 5 form blocks
  • Now when icons are used in a block automatically convert to the users used icons set on the page so either Fontawesome5/6/7 or Bootstrap 5 icons
  • Bootstrap 5 starter blocks now ship with cleaner, more consistent semantic markup for brand elements right out of the box.
  • Inserted blocks are better prepared for visual editing, making common brand areas like headers, navbars, sidebars, auth screens, and app shells easier to customize.
  • Navigation and layout starters now provide a more reliable editing experience across different brand styles, from simple text brands to logo-and-name lockups.
  • Brand-focused navigation blocks now feel more production-ready, with clearer structure for left, center, and right brand patterns.
  • App shell, admin workspace, and marketing layout blocks now offer a more consistent branding experience across desktop-style interfaces.
  • Users working with menu-heavy layouts can now update branding with more confidence and less trial and error.
  • Login, registration, modal, and social-auth blocks now have a more consistent branding model, making it easier to adapt these starters to real projects.
  • Auth-related starters feel more cohesive with the rest of the Bootstrap 5 block library, especially when customizing logo and brand-name presentation.
  • This gives teams a faster path from starter block to polished branded experience without cleanup work after insertion.
  • The Bootstrap 5 block library is now more internally consistent, reducing edge cases where similar blocks behaved differently in the editor.
  • Generated block rules have been refreshed to stay in sync with the improved source blocks, helping the visual editing experience feel more reliable overall.
  • The result is a smoother, more predictable workflow when assembling pages from Wappler’s semantic Bootstrap 5 building blocks.
  • improved the used theme switcher component
  • Improved nav blocks with containers
  • Removed some old Bootstrap 4 artifacts like visually-hidden

Bootstrap 5 Blocks: Universal Layout Theme Support

  • Unified Bootstrap 5 layout starters to support light, dark, and auto themes in a single layout
  • Added the Bootstrap 5 theme manager and theme switcher to the layout shell blocks
  • Replaced the separate dark-only admin layout with a richer universal admin workspace layout
  • Normalized older layout starters to the shared app-shell structure for more consistent insertion behavior
  • Updated generated block rules so theme-aware layouts include the required Bootstrap 5 theme dependency
  • Synced the regenerated Bootstrap 5 block rules to the installed runtime configuration

Bootstrap 5

  • extended with more generic utility layout container
  • added more missing properties
  • Improved flex block to be able to be converted to checkbox or radio group
  • improved form input recognition
  • Bootstrap 5 Forms improved the input group text
  • Improved the new Utility Wrapper to show the tag name in the structure panel

Bootstrap 5 Form Hierarchy And Preview Sweep

  • Restored consistent Bootstrap 5 form hierarchy across the updated registration, login, settings, contact, quote, invite, checkout, and support starter blocks so inputs and grouped controls are recognized more reliably in the structure panel.
  • Normalized the original Forms_* registration and login family to use clearer card-shell-plus-form structure, stronger .form-group usage, and more editor-friendly grouping for inputs, checkboxes, and supporting UI states.
  • Extended that same structural cleanup into additional reusable starters outside the core forms family, including account settings, invite flows, quote requests, support contact, verification, password recovery, subscribe, and checkout blocks that still used older form.card shells.
  • Improved grouped switch and preference controls in the touched settings-style blocks so account and role-management forms read more cleanly as grouped controls instead of loose visual rows.
  • Refreshed the most visibly changed form thumbnails so the block picker now better reflects split-layout, sidebar, and full-page form structures instead of older generic single-card previews.
  • Regenerated and synced the Bootstrap 5 block rules after the form sweep so the corrected source markup and picker metadata stay aligned in the installed runtime copy.

Component Picker

  • Improved insertion of Bootstrap 5 Blocks
  • Now auto translate the content view include to the right server language for layouts

FontAwesome icons

  • Updated version 6 to the latest 6.7.3 for both free and pro
  • New Version 7.2.0 included in both free and pro

Structure Panel

  • Improved framework actions so add, options, and remove are clearer.
  • Show framework options only for frameworks that are active on the current page.
  • Better highlight the active framework variant.
  • Semantic items now read much more clearly in the Structure panel, so builders can identify components by their real content instead of generic labels.
  • Navigation links, content labels, headings, captions, and other semantic elements now surface more meaningful names directly in the tree.
  • Brand-related elements are easier to spot and manage because their visible names now show up more reliably where users expect them.
  • Improved Structure tree action buttons so item labels shorten cleanly before the action icons appear, avoiding overlap and flicker.
  • Refined Structure tree hover and focus behavior so only the active row shows action buttons, not its parent items.
  • Moved element ID tooltips from the whole tree row to the ID label itself, preventing tooltip clashes with action buttons.
  • Improved Structure tree tooltip placement so row action and ID tooltips prefer above or below the item instead of covering nearby content from the side.
  • Fixed tooltip positioning edge cases in the shared tooltip system, including a crash affecting auto top/bottom placement.
  • New updated menu

Framework Options

  • Automatically open framework options when setup is needed after adding.
  • Keep saved framework choices easier to reopen and update.
  • Improved the options dialog layout to make choices easier to understand.

Font Awesome 7

  • Added support for choosing only the Font Awesome 7 styles you need.
  • Improved setup for Free local, Free CDN, and Pro local variants.
  • Reduced the default includes so new setups start lighter.
  • Improved Fontawesome6 and 7 detection and switching
  • Improved include options styling

Frameworks Manager

  • Sort frameworks on versions so newest one come first in the picker panel

Design View

  • Improved labels in design view
  • Detect both dmx-repeat component and attribute

Design Panel

  • Show actual inherited css values instead of variable names in design panel

New experimental Git Manager

  • Improved git graph in advanced view
  • Improved error handling
  • Added new sorting and filtering options to advanced git view
  • Fixed git graph with first parent only
  • Merged context menu from labels into commit context menu
  • New methods to rename branch/tag
  • Reordered labels
  • Added graph to basic view
  • Improved graph rendering
  • Replaced branch select menu
  • Added show/hide toggle for graph
  • Improved basic view list
  • Show/hide tags
  • Show chevron on branch button
  • Split branch names on / to create submenu
  • Added more filters
  • Added icons to menus
  • Start/Finish feature
  • Moved refresh to bottom in menu

Demo Projects HQ

  • Supply Git history for the demo so all the git manager tours can show it off and explain

Wappler Tours

  • Added new Bootstrap 5 semantic tours to make the structure of real pages much easier to understand, from parent layout sections down to the components you place inside them.
  • Added a new Starter Blocks tour showcasing polished Bootstrap 5 starter sections and explaining how they stay easy to customize after insertion.
  • Improved the Bootstrap getting-started path so new users can move more naturally from first setup into semantic page-building and starter-based workflows.
  • Added a clearer first-page-layout learning path that connects Pages Manager, the HTML Editor, and Bootstrap basics into one smoother onboarding flow.
  • Updated Pages tours so the new starter-page workflow is easier to discover from the main Pages hub and better connected to the new Bootstrap starter-block guidance.
  • Refined the Pages Manager and starter-page tours to better explain how page creation, page types, layouts, and starters fit together before users continue into editing.
  • Update all Git Manager tours to reflect the new features of the new Experimental Git Manager
  • Improved the Git Manager tours to show also the latest options and views in the context menu
  • Updated search index with the new tours

General

  • Improved path determination for head pages of old PHP projects
  • Improved the error handling of updating main pages when they are invalid, so show tast error, but still save the file
  • Improved adding frameworks with include options like Font Awesome 7
  • Improved changing frameworks with the same major version but different include type

Fixed issues

3 Likes