Your Checkout Flow Isn't Broken for Humans Only. It's Broken for the Agents Shopping for Them.

Chrome's auto browse scrolls, clicks, and types on its own. ChatGPT Atlas navigates tabs and helps complete purchases. Perplexity Comet researches across pages and fills forms. These tools are already handling real user intent on real websites.

None of them experience your site the way a person does. They do not admire your gradient hero or infer meaning from pixel-perfect spacing. They read structure: roles, names, states, landmarks, and focus order. That structure is the accessibility tree, and it is rapidly becoming the API your business runs on when AI acts on behalf of customers.

If your interface is inaccessible, it is not merely harder for screen reader users. It is increasingly opaque to the agents your customers are already delegating to.

How Agents Actually Parse a Page

The industry is converging on a small set of patterns.

Vision-first agents like Anthropic's Computer Use interpret screenshots and estimate where to click. This works until a layout shifts, a modal overlaps content, or two buttons look identical in the crop. It is expensive and brittle.

Accessibility-tree agents read a semantic snapshot: buttons, links, fields, headings, landmarks. Microsoft's Playwright MCP exposes exactly this kind of structure. OpenAI states that ChatGPT Atlas uses ARIA tags and the same labels and roles that power screen readers. Publishers are explicitly directed to follow WAI-ARIA best practices.

Hybrid agents combine both. Google's Project Mariner and OpenAI's computer-using stack observe visuals and underlying structure before planning the next action.

The direction is clear. Even vision-heavy systems are pulling in accessibility data. The platforms optimizing for speed and reliability lead with the tree.

Your accessibility tree is no longer a compliance appendix. It is the primary contract between your application and whatever system is trying to complete a task on a user's behalf.

Why the Tree Wins (and What Happens When It Lies)

A production DOM can contain thousands of nodes. The accessibility tree keeps what matters: what you can activate, what it is called, and how the page is organized. For models working inside tight context windows, that compression is not a nice-to-have. It is the difference between a plan and a guess.

Research presented at CHI 2026 (the A11y-CUA work from UC Berkeley and the University of Michigan) stress-tested Claude Sonnet 4.5 on everyday desktop and web tasks under three conditions: normal use, keyboard-only navigation, and a magnified viewport. The gaps were large:

Condition	Task success	Relative time
Standard	~78%	baseline
Keyboard-only	~42%	~2× longer
Magnified viewport	~28%	~3×+ longer

Keyboard-only access is not a laboratory curiosity. Tree-based agents identify and activate elements through the same semantics keyboard users depend on. When roles are missing, labels are placeholders, or focus traps dead-end, humans and agents both stall, retry, and abandon.

Accessible interfaces publish intent. Inaccessible interfaces force inference.

The Practices That Matter in an Agentic World

You have heard most of this before. That is the point. Agent readiness is not a parallel standard. It is accessibility done honestly.

Use semantic HTML for real

Native elements arrive in the tree with role, name, and behavior intact.

<!-- An agent can find, name, and activate this -->
<button type="submit">Complete Purchase</button>

<!-- An agent must infer role and purpose from class names and layout -->
<div class="btn btn-primary" onclick="handleSubmit()">Complete Purchase</div>

Landmarks matter for orientation:

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/products">Products</a></li>
      <li><a href="/pricing">Pricing</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Checkout</h1>
  <form aria-labelledby="shipping-heading">
    <h2 id="shipping-heading">Shipping address</h2>
    <!-- fields -->
  </form>
</main>

A page built from anonymous <div> shells gives agents no map. A page built from landmarks and headings gives them an outline.

Label every interactive control

Agents bind user intent to fields by accessible name, not by visual proximity.

<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" autocomplete="email">

<!-- Bad: placeholder is not a name -->
<input type="email" placeholder="Enter your email">

Icon-only controls need explicit names:

<button aria-label="Add to cart">
  <svg class="icon-cart" aria-hidden="true"></svg>
</button>

In a multi-step checkout, "Submit" on step three and "Submit" on step four are indistinguishable without context. Be specific: "Place order", "Continue to payment", "Apply coupon".

Use ARIA sparingly and correctly

The first rule of ARIA is to prefer native HTML. role="button" on a <div> does not grant focus management, keyboard activation, or disabled state handling. ARIA annotates gaps; it does not repair wrong elements.

Where ARIA earns its keep: dynamic regions and custom widgets with no native equivalent.

<div aria-live="polite" aria-atomic="true">
  <p>3 results found</p>
</div>

<button aria-expanded="false" aria-controls="details-panel">
  Show Details
</button>
<div id="details-panel" hidden>
  <!-- panel content -->
</div>

Without aria-expanded, an agent may toggle a panel, see no obvious visual change if content is below the fold, and conclude the control is broken.

Ship meaningful HTML before JavaScript runs

Many agents execute JavaScript; many crawlers and indexers do not. Critical prices, availability, and CTAs that exist only after a client-side fetch are invisible to a growing share of automated traffic.

Server-rendered or statically generated HTML puts facts in the document from the first byte. That helps agents, search systems, and anyone else that will not wait for your bundle to hydrate.

Where Component Libraries Fit: jQWidgets and Smart.UI

Enterprise UIs are rarely built from raw HTML alone. Data grids, schedulers, Gantt charts, and complex pickers are exactly the controls agents struggle with when implemented as one-off custom widgets with incomplete semantics.

This is the problem jQWidgets and Smart.UI were built to solve at scale: rich interaction without sacrificing the structure agents and assistive technologies require.

jQWidgets: accessibility baked in, not bolted on

jQWidgets ships 180+ high-performance components for Angular, React, Vue, Blazor, and JavaScript, with built-in WAI-ARIA enabled by default. Initialize a slider and the library applies the roles and properties from W3C widget design patterns automatically:

<div id="slider" role="slider"
     aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"
     aria-disabled="false" tabindex="0">
</div>

That is not documentation theater. It is the same attribute surface Playwright-style snapshots and screen readers consume. jQWidgets also provides keyboard support across widgets, RTL for international layouts, and a WCAG 2.0 AAA high-contrast theme for low-vision users. Recent releases have pushed accessibility further: improved focus management, more consistent ARIA across the catalog, and keyboard paths aligned with WCAG expectations.

For teams maintaining long-lived enterprise apps, the lesson is practical: a complex grid or scheduler does not have to be an accessibility dead zone if the component layer publishes correct roles, values, and focus behavior from day one.

Smart.UI: Web Components, standards, and the agent stack on both sides

Smart.UI is the evolution of that enterprise work: a framework-agnostic library of 70+ Web Components built on Custom Elements and modern ECMAScript, with WAI-ARIA 1.1, WCAG, and Section 508 compliance tested via Lighthouse and browser accessibility inspectors. Components follow authoring practices: menus expose role="menu" and role="menuitem", form controls wire aria-label and described-by relationships, and keyboard shortcuts match documented patterns (arrows, Enter, Space, Escape, Tab order).

Smart.UI is what you want when you are building once and deploying across Angular, React, Vue, and Blazor without re-implementing accessibility per framework adapter.

The agent story does not stop at the browser boundary. Smart.UI ships an MCP server for AI-assisted development (smart-mcp), with categorized prompts for Grid, Scheduler, Gantt, Chart, Tree, Menu, and more, including explicit accessibility (a11y) workflows: ARIA labels, keyboard navigation, and screen reader support in generated examples. Developers using Cursor, VS Code, or Zed can ask a coding agent to scaffold a virtualized grid or checkout scheduler and inherit the component library's semantic contract instead of inventing fragile custom markup.

That is a useful symmetry: accessibility-tree agents navigate your production UI; MCP-connected coding agents help you build that UI with the same standards in mind from the first prompt.

Choosing between them (and when both appear together)

	jQWidgets	Smart.UI
Architecture	Mature multi-framework suite; jQuery heritage where needed	Native Web Components; zero framework lock-in
Accessibility	WAI-ARIA on by default; keyboard + RTL + high-contrast theme	WAI-ARIA 1.1, WCAG, Section 508; per-component a11y docs
Best for	Large existing jQWidgets/Angular/React/Vue estates	Greenfield or migration to standards-based custom elements
Agent angle	Predictable tree from battle-tested widgets	Same, plus MCP for generating accessible Smart UI code

National Instruments, Microsoft, Intel, Boeing, and thousands of other teams already bet on this stack for demanding interfaces. The same properties that made grids and schedulers usable in engineering tools and admin consoles are what make those screens legible to the next generation of automated clients.

How to Audit for Agent Readiness (Without New Tooling)

Inspect the accessibility tree. In Chrome DevTools, open Elements → Accessibility. Walk your highest-intent flow (checkout, signup, booking). At each step, ask: can I name the next control and its purpose from the tree alone? If not, fix that before tuning prompts.

Run automated scans. Missing labels, empty buttons, skipped heading levels, and absent alt text are the structural failures that break agents first. Start with conversion paths, not the marketing homepage.

Keyboard-only the full flow. Tab through every step. Confirm focus order, visible focus rings, and no mouse-only traps. Keyboard paths are how tree-led agents often operate.

Audit headings. One logical h1, no skipped levels, labels that describe the section beneath them. Headings are the table of contents in the snapshot an agent reasons over.

Stress-test custom widgets. If you use a component library, verify each control in the tree: name, role, value, expanded/checked/disabled state. Library defaults are only as good as your configuration (labels, aria-labelledby, live regions for async updates).

Why This Is a Now Problem

Auto-browse, AI browsers, and MCP-driven automation are shipping features, not research demos. They are already a slice of your traffic.

What is different from past "optimize for X" cycles is that the hard work is finished. Semantic HTML, proper labeling, keyboard contracts, and ARIA used with restraint are not new ideas. The accessibility community defined them for people. It turns out people were never the only consumers of a well-structured page.

Every native <button> you choose over a styled <div>, every real <label>, every landmark and heading you respect, compounds across interfaces we have not imagined yet: screen readers today, shopping agents tomorrow, and whatever reads the tree after that.

jQWidgets and Smart.UI exist because enterprise teams could not afford to relearn those lessons on every grid, chart, and scheduler. The web does not need a second accessibility standard for AI. It needs the first one implemented consistently, at scale, in the components where applications actually live.

The future is not asking you to retrofit a parallel web for machines. It is asking whether the structure you should have built for humans is finally in place when an agent arrives to complete the purchase.

Build for people. The agents were always listening to the same tree.

Engineering orgs are shipping faster than ever, and a growing share of that speed comes from AI-assisted coding: autocomplete, chat-driven refactors, and generated integration code that drops new packages into the repo almost frictionlessly. The first pull request looks like a win - until, months later, the same organization is maintaining someone else’s abstraction with no vendor to call, no security commitment you can audit as a contract, and no one who is responsible when production breaks or a disclosure lands.

This article argues that the long-term problem is not “open source versus commercial” in the abstract. It is unowned dependency risk: stacks assembled from convenient, no-invoice libraries that were never matched to support, upgrade policy, or incident ownership. Over a multi-year horizon that pattern routinely increases time-to-market, because velocity shifts from feature work to triage, patching, and re-integration every time the framework, browser, or security bar moves.

We still decode Community versus Enterprise licensing - because legal scope and feature gating matter - but we ground that discussion in how teams ship today: AI magnifies adoption; it does not magically supply accountability. We then use our Smart UI component library as a concrete example of a clearly documented split between Community use and commercial production tooling, support, and updates. A comparison table for engineering and legal follows (use the expand control on narrow screens).

The AI acceleration trap: more libraries, no one on the hook

Assistants are excellent at suggesting imports, scaffolding glue code, and “fixing” build errors by adding yet another package. They are not accountable for your roadmap in 2028. The predictable failure mode looks like this:

• Volume without vetting. Dependencies enter the codebase because the shortest path compiled on a laptop, not because procurement, security, or architecture signed off on a maintenance model.
• No support relationship. Many community projects are maintained by volunteers or thinly staffed teams. That is not a moral judgment - it is a capacity fact. There is no ticket you can escalate when a zero-day or a breaking React release intersects with your release train.
• Responsibility collapses inward. When the upstream is silent or slow, the obligation lands on your engineers - who also own product features, migrations, and on-call.

The organization still expects the same SLAs and security posture; it has simply traded a line item on a vendor invoice for an unpriced line item on every sprint thereafter.

When “we will just patch it” eats the roadmap

Once a critical screen depends on a library that cannot keep pace, teams reach for local workarounds: fork the repo, patch node_modules with post-install hacks, wrap internals that were never a stable API, or carry a vendored copy. Each shortcut buys days and costs quarters.

• Upgrade tax. Every framework bump becomes a bespoke merge project. The “free” library is now a permanent internal subsystem.
• Knowledge silos. Only the engineer who wrote the patch understands the invariant; bus factor drops just when reliability matters most.
• Slower time-to-market - despite AI. Short-term generation speed is erased by long-term integration drag. The team is busy being the unpaid maintainers of UI infrastructure instead of shipping differentiated product.

That is the paradox leadership teams miss: automation that accelerates code output does not reduce operational ownership. If anything, it spreads ownership across more third-party surface area.

Security needs a clear owner, not just a license file

Compliance frameworks and customers increasingly ask who remediates, how fast, and how you prove it. A permissive SPDX string answers licensing; it does not answer incident response. Community stacks often lack:

• Assured patch channels for vulnerabilities in complex client-side code (grids, editors, parsers).
• Coordinated disclosure handling aligned to your contractual obligations.
• Long-term compatibility commitments across major browser and framework releases - exactly where UI kits fracture first.

Enterprise procurement exists partly to buy accountability: a counterparty, a support queue, and a renewal discussion that forces both sides to plan upgrades. That is not romantic, but it is measurable - whereas “we hope someone merges the PR” is not a control you can put in a SOC narrative.

Why licensing still belongs in the same conversation

Licensing encodes what you are allowed to do; support encodes who will help when reality disagrees with the README. Together they define the real cost model. Three layers still matter:

• Public license text - redistribution, modification, attribution, and any copyleft triggers.
• Commercial terms - which environments and widgets are covered, how developers scale, what happens after year one.
• Operational reality - upgrades, security, and whether your team is about to become the accidental maintainer of a grid.

A kit that feels “cheap” in a spike can still become expensive if production rights, advanced components, or brand rules collide with the Community tier - or if you end up owning the fork forever.

Licensing dimension	Typical Community / free	Typical Enterprise / paid	Smart UI (this product)	Verify before ship
Production deployment	Often limited to personal use, learning, evaluation, or non-production / prototype contexts	Explicit rights for production apps and customer-facing tenants	Our Community tier is described for personal, educational, and evaluation use, with non-production or prototype applications called out on the license page	Confirm your environment (internal vs SaaS) against the current agreement - not only the README
Advanced data & visualization	May omit high-throughput grids, scheduling, Gantt, pivot, or deep charting	Full professional catalog, templates, and sometimes source or theme tooling	Published summary: Grid, Scheduler, Charts, and related advanced components require a commercial license; see Community vs Enterprise	Map every must-have widget to the edition before UX sign-off
Attribution & distribution	May require visible credit, notice files, or other brand constraints	Usually fewer redistribution strings; still read the EULA	Our Community license summary includes attribution in distributed applications (pricing / license overview)	Run past marketing and legal if you ship binaries or white-label products
Support & SLAs	Forums, docs, community issues - no guaranteed response time	Paid channels, renewal terms, sometimes enterprise SLAs	Community: forum and documentation support; commercial tiers add professional support options per pricing	Decide who owns pager-duty for UI regressions after launch
Developer scaling	Often unspecified or single-seat assumptions	Per developer, team packs, or company-wide unlimited SKUs	Commercial line-up includes Developer, Team, Unlimited, and custom Enterprise options - headcount matters	Model cost if your contributing developer count doubles next year
Security & incident ownership	Best-effort maintainer bandwidth; disclosure timelines vary; you may wait on volunteer availability	Vendor remediation paths, coordinated updates, and support channels you can reference in reviews	Community relies on forum/documentation support; commercial tiers add professional support and product updates per published pricing	Ask how a Sev-1 in a complex widget gets patched in your contract window - not how it looks in a demo
Long-term maintenance	Risk of internal forks, local patches, and “we own the upgrade” work that competes with product delivery	Vendor bears much of the compatibility and release cadence burden for the licensed catalog	Commercial edition targets teams that need the full professional component set (e.g. Grid) without becoming the unpaid maintainers of that stack	Measure not only sprint zero, but the cost of the next major React or enterprise browser policy change

What “Community” usually means in practice

Community editions are legitimate on-ramps: they lower the cost of evaluation and training. In an AI-heavy workflow they are also the tier most likely to be adopted accidentally - because tooling optimizes for “works on my machine,” not for who patches the next CVE. They are rarely identical to the commercial product in legal rights or feature depth. Patterns we see across the market include:

• Scope limits - personal, educational, or evaluation-only language; or explicit non-production / prototype allowances.
• Widget gating - enterprise grids, schedulers, pivot engines, and rich charting reserved for paid SKUs.
• Attribution - credit lines or notice bundles in shipped apps.
• Support shape - self-service and forums versus named support with response targets.

None of that makes Community editions “bad.” It means the boundary should be explicit in your architecture review - not discovered during a compliance pass.

What Enterprise is really buying

Paid tiers bundle more than pixels. Teams are usually purchasing risk transfer back out of the application team:

• Production clarity - rights that match how and where you deploy, without surprise attribution or scope clauses at GA.
• Advanced components - the parts of the catalog that Community does not cover, so you are less tempted to fork or wrap unstable internals.
• Named support and renewals - a counterparty when releases, accessibility law, or browser policy moves underneath you.
• Seat math - licenses that still fit after hiring, instead of informal “everyone uses the same key” debt.

When comparing vendors, normalize quotes on covered developers, renewal mechanics, major-version upgrades, and source / theme tooling - and on who owns the grid when it fails at 2 a.m. Headline price alone is easy to misread.

License families: a quick decoder

• Permissive (MIT, BSD, Apache 2.0) - broad reuse; still read any additional vendor terms that apply to specific packages or trials.
• Copyleft (GPL, AGPL) - can impose obligations on distribution or, for AGPL, networked deployment; involve counsel when in doubt.
• Commercial + trial - full features until a key expires; watch for trial artifacts in staging or CI.

Procurement and security may also weigh third-party notices, export controls, and data flows through AI-assisted features. A model that confidently cites a license string is still not a substitute for human review of the actual dependency graph - especially when new packages appear several times a week.

Smart UI: how we document Community vs commercial

We publish both a Licensing and Pricing page and a Community and Enterprise comparison in our documentation, so the line between “try and learn” and “ship under a production license” is explicit - not something you have to infer from a chat transcript. For React, start from Smart UI for React; the npm package name we document there is smart-webcomponents-react.

Community (as summarized on our license page): priced at $0; oriented toward personal, educational, and evaluation use; non-production or prototype applications; community support via forum and documentation; attribution required in distributed applications; and advanced components such as Grid, Scheduler, and Charts called out as requiring a commercial license.

Commercial: Developer, Team, Unlimited, and custom Enterprise offerings bundle the professional catalog, support, and scaling options described on the same pricing page. Numbers and promotions change; use the live site when you build a budget. The point here is not a feature tour - it is that we stand behind the professional tier with product updates and commercial support options, which ad hoc stacks of AI-suggested dependencies typically do not offer.

Practical takeaway: if your roadmap depends on a production-grade Grid or comparable enterprise widgets, plan the commercial path early so you are not training the organization to maintain a one-off fork. If you are in a prototype-only phase, Community may fit - provided you honor attribution and scope rules as written and you do not let AI-assisted integration quietly expand into production use without the right license.

Decision checklist before you standardize

1. Human gate on AI-suggested deps - Has a staff engineer or architect explicitly approved maintenance and incident ownership - not only “it passed CI”?
2. Environment - Will this ship to production tenants or stay in demos?
3. Critical widgets - Does the free tier legally and technically include every control on the critical path?
4. Legal source of truth - Have you read the vendor license page, not only the package keyword on npm?
5. Security story - Who patches the next client-side vulnerability, and on what timeline can you defend that answer to security or customers?
6. Fork policy - Under what conditions are local patches allowed, and who merges upstream forever?
7. Operations - Who supports regressions after launch: vendor queue or your feature team?
8. Growth - Do seats still work if the team doubles?

Wrap up

AI tools compress the typing phase of software delivery. They do not remove the ownership phase: security, upgrades, compatibility, and the slow grind of maintaining dependencies that no one is contractually obligated to fix for you. When teams compensate by patching open-source UI code inside product repositories, they often discover that time-to-market gets worse, not better, as soon as the product must evolve under real governance.

“Free” UI kits can still be the right choice for learning, prototypes, and carefully bounded internal use. The real cost shows up where those boundaries end: production rights, advanced widgets, attribution, and whether you have an accountable partner when the stack moves. If Smart UI is on your shortlist, we invite you to start with our docs and demos, match the edition to your environment, and upgrade to commercial when production grids, scheduling, and support requirements make that the honest fit.

Disclaimer: This blog post summarizes our publicly posted licensing descriptions and is not legal advice. Confirm the current agreement on htmlelements.com/license and involve counsel for your situation.

npm install smart-webcomponents-react

import { Component } from '@angular/core';
import { GridModule } from 'smart-webcomponents-angular/grid';

@Component({
  selector: 'app-smart-grid',
  standalone: true,
  imports: [GridModule],
  template: `
    <smart-grid 
      [dataSource]="dataSource"
      [columns]="columns"
      [pageable]="true" [filterable]="true" [sortable]="true"
      [editable]="true"
    >
    </smart-grid>
  `
})
export class SmartGridDemo {
  dataSource = [ /* array or remote adapter */ ];
  columns = [
    { label: 'ID', dataField: 'id' },
    { label: 'Product', dataField: 'name' },
    { label: 'Price', dataField: 'price', dataType: 'number' }
  ];
}

Gantt charts remain one of the most important UI components in modern project management, enabling teams to visualize tasks, dependencies, deadlines, and resource allocation in a single interactive timeline.

In 2026, developers building SaaS platforms, enterprise dashboards, and internal tools increasingly rely on reusable Gantt components rather than building custom timeline systems from scratch. The right choice depends on performance, framework support, customization depth, and time-to-market.

Below is a curated list of the top 5 Gantt chart components in 2026, ranked based on developer experience, flexibility, and modern framework compatibility.

1. Smart.Gantt — Modern, Lightweight & Fully Framework-Agnostic

Smart.Gantt is one of the most modern Gantt chart components available today. Built on Web Components, it is designed for performance and seamless integration across modern frontend frameworks.

It supports Angular, React, Vue, and Blazor natively, making it an excellent choice for cross-platform enterprise applications where multiple frontend stacks coexist.

Unlike heavier enterprise UI suites, Smart.Gantt focuses on clean architecture, fast rendering, and minimal integration overhead. Developers can embed it directly into any modern web application without framework lock-in.

Official site: Smart UI / Smart.Gantt

Key Features

• Web Components-based architecture (framework-agnostic)
• Full support for Angular, React, Vue, and Blazor
• Interactive task bars with drag-and-drop editing
• Task dependencies and hierarchical structures
• Lightweight rendering optimized for performance

Best For

• Modern SaaS applications
• Multi-framework enterprise environments
• Teams prioritizing performance and simplicity

Considerations

• Smaller ecosystem compared to older enterprise libraries
• Advanced workflows may require customization

2. Webix Gantt — Full-Featured Project Planning UI

Webix Gantt is a powerful enterprise-ready Gantt chart component designed for building complete project management interfaces rather than simple timeline visualizations.

It includes a full UI system for task management, dependencies, scheduling, and backend integration, making it suitable for fast enterprise application development.

Key Features

• Full project management UI out of the box
• Task dependencies and critical path visualization
• Resource allocation and workload tracking
• Drag-and-drop scheduling
• Backend integration support

Best For

• Enterprise project management systems
• Internal business tools
• Rapid development of complex planning apps

webix.ready(function() {
  if (webix.env.mobile) webix.ui.fullScreen();
  webix.CustomScroll.init();

  webix.ui({
    view: "gantt",
    url: "https://docs.webix.com/gantt-backend/"
  });
});

3. DHTMLX Gantt — Highly Flexible Developer Library

DHTMLX Gantt is one of the most established JavaScript Gantt libraries, widely used in custom project management systems requiring deep flexibility.

Key Features

• Highly customizable timeline and grid system
• Task dependencies and constraints
• REST API integration support
• Framework integrations (React, Angular, Vue)
• Advanced scheduling capabilities

4. Syncfusion Gantt Chart — Enterprise UI Suite Integration

Syncfusion Gantt Chart is part of a large enterprise UI ecosystem supporting Angular, React, Vue, and Blazor.

Key Features

• Cross-framework UI consistency
• Task dependencies and baselines
• Critical path analysis
• Export capabilities (PDF, Excel)
• Responsive UI design

---

5. Highcharts Gantt — Data-Driven Timeline Visualization

Highcharts Gantt extends Highcharts into interactive Gantt and timeline visualization for data-heavy applications.

Key Features

• Interactive timeline visualization
• Task dependencies and milestones
• Strong analytics integration
• Export and embedding tools
• High performance rendering engine

Summary

• Smart.Gantt — best for enterprise, modern, cross-framework apps (Angular, React, Vue, Blazor)
• Webix Gantt — best for full project management systems
• DHTMLX Gantt — best for deep customization
• Syncfusion Gantt — best for enterprise UI consistency
• Highcharts Gantt — best for data-driven visualization

Gantt components are evolving toward modular, framework-agnostic architectures, making them easier to integrate into modern product stacks while reducing development overhead.

A big improvement is coming in the new version of Smart.Grid.
We are adding shorthand properties that make sorting and filtering incredibly easy to enable:

<smart-grid sortable filterable></smart-grid>

Perfect for beginners, quick demos, and AI-generated code. For developers who need full control, the advanced configuration remains available:

grid.sorting = { enabled: true, mode: 'many' };
grid.filtering = { enabled: true, filterRow: true };

The new version delivers:
- A simple API for fast setup
- Full flexibility for advanced use cases
- Cleaner and more intuitive HTML
- No loss of power or depth

The new shorthand props are: sortable, filterable, editable, groupable, selectable, pageable, columnResize, columnReorder

Smart.Grid will soon offer the ideal combination of simplicity and capability.
If you enjoy tools that start easy and scale to enterprise-level complexity, you will love this update

We are pleased to announce the latest release of our Smart UI Component Library. This update introduces new features across Grid, Gantt, Tree, and input components, along with performance improvements, security enhancements, and important bug fixes.

---

New Features

Grid

• Grid Templates with Array Definitions
  Define template elements using arrays. The Grid automatically updates when the underlying array changes.
• Customizable Grid Header Templates
  Simplified and flexible approach for fully customizing Grid headers.
• Enhanced Set Filters
  Expanded filtering capabilities for improved data control and user experience.
• Row Editing with Side Panel
  Edit rows in a dedicated side panel for improved usability and cleaner workflows.
• Row MouseEnter / MouseLeave API
  New row-level events to support advanced UI customization and interactive scenarios.
• InsertRowBefore / InsertRowAfter API
  Programmatically insert rows before or after a specified row.
• Export Enhancements
  • Protect exported sheets
  • Freeze columns in exported files
  • New grouping render option for improved grouped data rendering
• Content Security Policy (CSP) Improvements
  Enhanced compatibility with strict CSP configurations, supporting more secure enterprise deployments.
• New Grid Demo
  Added an updated demo showcasing the latest Grid capabilities and configuration options.

Gantt Chart

• New Methods
  • expandAllRows()
  • collapseAllRows()
• Connections Indexing Improvements
  Refined indexing logic for more reliable task connection handling.

Tree

• Disable Drag for Specific Items
  Prevent drag-and-drop for selected Tree nodes.

Dropdown & Input Components

• Updated Dropdown Mode Selection Options
  Expanded configuration options for dropdown selection behavior.
• Date Input with Time Picker
  Optional time selection support added to the Date Input component.
• DropdownList Autofocus
  Automatically focuses the DropdownList on initialization when configured.

---

Improvements

• Improved Grid row sizing stability
• Enhanced Grid column editor initialization
• Refined Grid row reordering behavior
• Overall Grid performance and consistency improvements

---

Bug Fixes

• Resolved Gantt task expansion issues
• Fixed Gantt connections indexing issues
• Addressed Grid row sizing bugs
• Fixed Grid row reordering issues
• Resolved column editor initialization issues
• Fixed editor automatic formatting bug

This release focuses on enhancing flexibility, security, and overall component stability while expanding customization capabilities across the library.

We’re thrilled to announce the official launch of Smart UI MCP Server — the first AI coding assistant built exclusively for Smart UI components.

Now, you can generate production-ready code for Grid, Chart, Gantt, Table, Calendar, Tree, Menu, and 70+ other components — directly inside VS Code or Cursor — using your own API key.

Why Smart UI MCP Server?

Frontend developers spend hours configuring complex UI components. With Smart UI MCP Server, you simply type a natural language prompt prefixed with #smartdev — and get fully working, best-practice code in seconds.

Key Features

• 70+ Categorized Prompts – From basic to advanced use cases
• Works in VS Code & Cursor – Full MCP integration
• Use Your Own API Key – OpenAI, Grok, Azure, Ollama, Anthropic, Gemini, Cohere
• No Data Leaves Your Machine – Full privacy & control
• Framework Support – Angular, React, JavaScript, TypeScript
• Dark Mode, i18n, Accessibility, Performance – Built-in best practices

How It Works

Add the server in under 60 seconds:

Then just type #smartdev + your request. That’s it.

70+ Ready-to-Use Prompts

Here are just a few examples from our growing library:

View all 70+ categorized prompts →

Get Started in 3 Steps

1. Install – Add smart-mcp via npx
2. Configure – Add your API key in mcp.json
3. Code – Use #smartdev to generate UI components

Join the Future of UI Development

Smart UI MCP Server is more than a tool — it’s a paradigm shift in how frontend teams build enterprise applications.

Whether you're prototyping an MVP, optimizing performance, or migrating legacy UIs — Smart UI MCP Server has your back.

Ready to 10x your UI development speed? Try Smart UI MCP Server today.

Get Smart UI License

Elevate Your Project with the New jQWidgets and Smart UI Component License!

We’re thrilled to announce the launch of the Component License for jQWidgets and Smart UI, now available for just $199! Exclusively on License - Smart UI Components, this license empowers developers to select a single, high-performance component to create tailored, standout applications with precision.

Pick Your Perfect Component

Choose one of our industry-leading components:

• Grid: Build dynamic, data-driven interfaces.
• Chart: Craft stunning, interactive visualizations.
• Scheduler: Streamline event management with ease.
• Editor: Create rich, user-friendly content editing.
• Kanban: Optimize workflows with intuitive task management.
• Gantt Chart: Master project timelines with powerful tools.

Why Choose the Component License?

• Precision Fit: License one component to match your project’s needs.
• Affordable Excellence: Access premium quality for only $199.
• Distinctive Edge: Leverage jQWidgets and Smart UI’ proprietary technology to build applications that competitors can’t replicate.

Get Started Now

Ready to transform your development? Visit License - Smart UI Components to explore the Component License or contact our sales team for details. Start building smarter today! Thank you for choosing jQWidgets and Smart UI! Best, The jQWidgets and Smart UI Team

We’re excited to announce that Smart UI now offers full support for Angular 20!

This update ensures seamless integration with the latest version of Angular, so you can continue building high-performance, modern web applications using Smart UI’s powerful components—now with all the benefits of Angular 20’s improvements in performance, developer experience, and stability.

- Out-of-the-box compatibility
- Updated @smart-webcomponents-angular package
- Support for Ivy and standalone components
- Works with Angular CLI 20 and latest TypeScript versions

Whether you're upgrading an existing project or starting something new, Smart UI is ready to help you deliver fast, clean, and scalable UI.

Smart UI v23.0.0 Release, May-13-2025

What’s New

AI & Smart Editing

Smart.Editor – All-in-One Smart Editor (Notion-style):

• Headings, Lists, Checkboxes
• Inline Tasks with Status, Due Dates, and Assignees
• Drag-and-Drop Blocks with Visual Reordering
• Emoji Support
• Slash Command Menus for Fast Block Insertion

Smart.Editor – AI-Powered Writing Tools:

• Content Generation: Turn short ideas into long-form content.
• Text Summarization
• Grammar and Clarity Fixes
• Tone Adjustment
• Translate
• Rewrite / Expand / Shorten
• Continue Writing

Smart.Editor – AI Auto-Suggestions:

As-you-type intelligence that surfaces phrase completions, formatting hints, and inline corrections.

• Grid – Rich Text Cells with AI. Grid cells now support advanced editing with the Smart Editor — including inline tasks, formatting, emojis, and full AI assistance.
• Grid – AI Prompt Integration. AI prompt bar added to editing dialogs to help users rewrite, translate, or generate content using natural language.
• Grid – React Cell Templates. You can now render native React components directly in grid cells, allowing complex custom UIs inside your data tables.
• Grid – Custom summaries support. Custom summaries feature added for enhanced reporting.
• Grid – Rich Side Panel for displaying context-aware content. New side panel added for better content display within the Grid.
• Editor – Structured Pages for multi-document workspaces.
• Editor – Smart toolbar with block-aware formatting tools.
• Grid – Formula Builder for easy creation of custom formulas.

What’s Improved

• Grid – Full Editor module used for rich text and AI when imported.
• Grid – Improved key/value dropdown editor behavior.
• Grid – Enhanced handling of formulas, templates, and formatting.
• Grid – Improved update behavior within beginUpdate/endUpdate.
• Grid – Enhanced clipboard and visual feedback for copy/paste.
• Grid – Improved link pasting and rich content rendering.
• Editor – More precise toolbar actions and event handling.
• Editor – Extended color options and custom block rendering.
• Input – Improved autoAdjustWidth logic.
• Scheduler – List navigation UX refinements.
• Gantt Chart – Clearer rendering of column labels.

What’s Fixed

• Grid – Arrow key navigation with frozen columns.
• Grid – Column autosize on double-click and datetime fields.
• Grid – Export issues with CSV/TSV and Cyrillic text.
• Grid – Styling in exports including ARGB colors.
• Grid – Context menu and dropdown overlap issues.
• Grid – Filtering bug with allowFilter.
• Grid – Formula recalculation bugs.
• Grid – Tree mode row deletion.
• Grid – Dynamic value update issues.
• Pivot Table – Sibling record hierarchy bugs.
• Editor – Selection/delete bugs and toolbar inconsistencies.
• Layout – Delete key handling issue.
• Kanban – Task field display bug.
• Blazor – Null property assignment issue.

What's New:

DropDownTree Component - Introduced a new rendering mode, allowing the tree component to be rendered within a dropdown.
React 19 support.
Grid - Added an option for custom summaries.

What's Improved:

Grid - Enhanced column header rendering with support for custom class names.
Grid - new context menu options for insert/remove row, comments, etc.
Scheduler - Improved list navigation for a smoother user experience.

What's Fixed:

Grid - resolved navigation issues with frozen columns when using arrow keys.
Grid - fixed column autosize functionality on double-click.
Grid - corrected column autosize behavior for datetime columns.
Grid - addressed issues with conditional formatting.
Grid - tree grid load-on-demand issues during dynamic scrolling.
Grid - corrected data export to CSV, ensuring proper handling of Cyrillic characters.
Grid - resolved issues with exporting to Excel when 'cellsFormat' set to 'd' was applied to numeric fields.
Pivot Table - Fixed issues with column hierarchies and the pivot designer.
Pivot Table - Corrected problems when clearing the data source and dynamically applying a new one.

Introducing the DropDownTree Component in Smart UI
We're thrilled to announce the upcoming release of a new and powerful component for the Smart UI toolkit: the DropDownTree. Designed to elevate user experience and simplify complex data interactions, the DropDownTree will be available in the next release of Smart UI.
What is the DropDownTree?
The DropDownTree combines the flexibility of a dropdown menu with the hierarchical structure of a tree view. It allows users to explore, navigate, and select items from nested data structures efficiently, making it ideal for applications that manage large datasets or require multi-level categorization.
Key Features:

• Hierarchical Display: Visualize nested data in an expandable tree structure.
• Checkbox Support: Enable single or multiple selections with integrated checkboxes.
• Dynamic Loading: Load data on-demand for seamless performance with large datasets.
• Custom Styling: Fully customizable to match your application's design.
• Accessibility: Built with accessibility in mind, ensuring usability for all users.

Who Will Benefit?
The DropDownTree is perfect for developers building dashboards, e-commerce platforms, project management tools, or any application that needs to present and manipulate hierarchical data intuitively.
When to Expect It?
The DropDownTree component is planned for inclusion in the next Smart UI release, bringing even more versatility to our growing toolkit. Stay tuned for more updates and a detailed demo of the DropDownTree in action. We can’t wait to see how you use it in your projects!

Smart UI v21.0.0 Release, Dec-01-2024

What's New:

• Angular 19 support.
• Excel Export for One or Multiple Images.
• Excel Export for custom header and footer.
• Excel Export of multiple sheets.
• Excel Export for Master and Detail Grids.
• Excel Export to Table.
• Excel Export with Froezen Header.
• Excel Export only selected Grid rows/cells.
• Grid Vote column for voting when the Grid is used by multiple.
• Grid filter by displaField in the grid.
• Grid copy column headers in clipboard.
• Dropdowngrid selection.

What's Improved:

• Grid scrolling performance improved by 30%.
• Grid getState, saveState and loadState behavior and state's json object.
• Grid keyboard navigation.
• Grid attachment column now supports for mp3, mp4, webm, mov and mpeg file types.
• Grid textarea dialog is resizable.
• Grid rows and columns resizing.
• Scheduler disableEventMenu property for disabling the default menu.
• Form custom button actions.
• Scheduler auto create dialog.
• Kanban editable sub tasks.
• Kanban mobile scroll.
• Scheduler mobile scroll.

What's Fixed:

• Gantt - resizing direction issue for tasks resolved
• Grid - fixed auto-closing behavior of the Grid toolbar dropdowns.
• Grid - resolved issues with grid rich text editing.
• Grid - corrected positioning issues in grid’s textarea dialog.
• Table - fixed column menu positioning and rendering in tables
• DateTimeInput - addressed issues with the Popup display.
• Pivot Table - fixed filtering panel and pivot table designer for duplicate items.
• Scheduler - fixed an issue related to the excel export.
• Gantt - fixed an issue related to the dates formatting in the excel export.

We're thrilled to introduce a fresh set of powerful tools and improvements in our latest release. This update is packed with new components, expanded functionality, and enhanced performance, all designed to boost your productivity and provide even greater control over your UI. Let's dive into what's new, what's improved, and the fixes that are making this release our best yet.

New Features

1. Timeline Component The new Timeline component allows you to display a chronological collection of events effortlessly. Whether you're working on a historical timeline or an event log, you can render the timeline vertically or horizontally. Plus, it's highly customizable with CSS, ensuring that it aligns with your design vision perfectly.
2. Design Blocks We've added Design blocks, a set of small, pre-designed UI elements that will fast-track your development process. Use them to quickly assemble Shells, Checkout forms, Contact pages, Login forms, Overlays, or Site navigation. No more building these elements from scratch—just grab, customize, and deploy!
3. Grid Conditional Formatting Based on Select Column With conditional formatting, your Grid component just got smarter! Now, you can apply conditional formatting based on a selected column, making data easier to interpret and analyze at a glance.
4. Grid AI Column Take advantage of the new AI column in the Grid component. It enables you to send prompts and update cells either in the same column or across other columns dynamically. This functionality opens the door to more intelligent data handling and automated actions.
5. Scheduler Auto-Create Dialog Managing schedules has never been simpler. The Auto-Create dialog in the Scheduler allows users to quickly create events after selecting a cell or a range of cells. This feature accelerates the scheduling process and improves user efficiency.
6. Enhanced Scheduler Features Now, the Scheduler allows dynamic scheduling or unscheduling of events through a built-in UI, complete with drag-and-drop functionality. There's also an option to disable conflicts, which prevents multiple events from being scheduled in the same time slot—making it easier to maintain an organized and conflict-free schedule.
7. TextArea Rich Text Formatting The TextArea component now includes advanced formatting options for background and color when used in rich text mode, giving users more control over the presentation of their content.
8. Localization Files Added We've added localization support for Italian, Spanish, French, German, Korean, Japanese, and Chinese to key components like the Grid, Gantt, Editor, and Scheduler, making it easier to build globally accessible applications.

Improved Features

1. Grid Checkbox Column Templates The Grid Checkbox column has been enhanced with new templates, allowing you to choose from multiple predefined checkbox styles. This added flexibility means you can easily match the checkbox design to your application's overall look and feel.
2. Grid Selection API The Grid Selection API has been expanded to make row selection and data retrieval smoother and more intuitive. Whether you're selecting single rows or multiple rows, this API upgrade will make it easier to manage and manipulate data.
3. DateInput Customization The DateInput component now allows further customization of the Calendar popup, offering more ways to tailor date selection to your users' needs.
4. Gantt Task and Tooltip Formatting We've also improved the Gantt component, allowing more detailed formatting for both tasks and tooltips, giving your Gantt charts a cleaner, more professional appearance.
5. Scheduler API Enhancements The Scheduler API has been upgraded with the addition of disableContextMenu and disableEventMenu options for events. This provides even more control over user interactions within the scheduler, allowing you to fine-tune what users can do with event entries.
6. Special Dates API for Scheduler The new special dates API allows you to define and highlight specific dates in the Scheduler with different colors, making it easier for users to identify important events or holidays.
7. Gantt scrollTo Method We’ve added a new scrollTo method for the Gantt component, ensuring users can quickly navigate to specific tasks or dates within the chart.

8. Improved Mobile Experience ListBox, DropDownList, and ComboBox now feature native scrolling on mobile devices, making them more intuitive and responsive on phones and tablets.

Bug Fixes

In this release, we've also addressed several key issues:


Grid Auto Height Mode: Resolved an issue when paging was enabled, improving layout consistency.
Grid Row Selection: Fixed an issue related to row selection when paging is enabled and selectAllMode is set to ‘all’.
Null Filter Issue in Grid: Using a filter with a NULL condition now works correctly, even without a specified value.
Grid Column Reorder: The filter icon now displays correctly after a column reorder.
Kanban Column Colors: Fixed issues where incorrect styles were applied to Kanban tasks.
Kanban Rendering with Swimlanes: Addressed rendering problems when swimlanes were dynamically shown or hidden.
Kanban Task Custom Fields: Custom fields are now applied and updated correctly.
Input Aria-Hidden Attribute: Corrected an issue with the aria-hidden WAI-ARIA attribute in Input components.
Accordion Expand/Collapse: Fixed issues related to nested accordions and their expand/collapse behavior.

Conclusion

With these exciting new features, improvements, and bug fixes, our latest release is designed to make your workflow smoother and your user interfaces more dynamic and responsive. Whether you're working with grids, schedulers, forms, or timelines, this release has something for everyone.

We look forward to seeing how you'll use these new tools to create amazing applications!

Introducing the Conflict-Free Scheduling feature in Smart.Scheduler! This innovative enhancement ensures seamless scheduling by preventing users from dragging, dropping, or resizing an event into an already occupied time slot. With Conflict-Free Scheduling, double-bookings are a thing of the past. This feature will be part of our upcoming release this month.

Key Benefits:

• Error-Free Planning: Automatically prevents scheduling conflicts by disallowing overlaps.
• Enhanced Productivity: Saves time by eliminating the need for manual conflict resolution.
• User-Friendly Interface: Smooth and intuitive interactions with clear visual cues when attempting to schedule over an existing event.
• Increased Reliability: Guarantees that all scheduled events are unique and non-conflicting, ensuring a reliable and organized calendar.

How It Works:

1. Drag-and-Drop Restriction: When users attempt to drag an event into a time slot that is already occupied, the system will provide immediate feedback, indicating the conflict and preventing the action.
2. Resize Limitation: If users try to extend or shorten an event's duration into a busy slot, the system will restrict the change, preserving the integrity of the existing schedule.
3. Visual Alerts: Real-time alerts and highlights will inform users about conflicts, making it clear why the action is restricted.

Experience the next level of efficient scheduling with Smart.Scheduler's Conflict-Free Scheduling feature, designed to keep your calendar organized and your planning hassle-free!

In the next version of Smart UI, we will be adding a new Timeline component. A timeline component is a user interface element used to display a chronological sequence of events or activities along a linear axis. It provides users with a visual representation of time-related data, making it easier to understand the order and relationships between different events.



Key features of the timeline component include:

• Chronological Display: Events are displayed in chronological order along a horizontal or vertical axis.
• Interactive Design: Users can interact with the timeline by scrolling, zooming, or clicking on individual events for more information.
• Customizable Styling: The appearance of the timeline, including colors, fonts, and layout, can often be customized to match the design of the application.
• Support for Rich Content: Any HTML content can be added to the Timeline component. For example it may be including text, images, videos, and links.
• Responsiveness: Adapts to different screen sizes and devices, ensuring a consistent user experience across platforms.

Timeline components are commonly used in a variety of applications, including project management tools, historical websites, educational platforms, and personal storytelling apps. They provide a visually engaging way to present time-related information, making it easier for users to understand and navigate complex chronological data.

What's New:

• Dropdown Grid mode.
• Conditional Cells and Rows Colors for the Grid.
• Grid Sparklines.

What's Improved:

• DateTimeInput API. The new API allows you to customize the settings of the dropdown calendar.
• ListBox API. Added removeItem method which allows you to remove an item by its value.
• Gantt API. Added "scrollTo" method which allows you to scroll to a specific date.
• Grid Clipboard functionality allows you to copy/paste entire columns.
• Grid Header row selection. Users can select multiple rows clicking the row header checkboxes.
• Grid CardView Styling and Appearance.
• Grid Readonly Edit mode. Allows you to make edits which will not update the data, but fill fire "cellEditRequest" event instead.
• Grid Dates Filtering Options. Added filter conditions such as Next Week, This Week, Last Week and similar.

What's Fixed:

• Firefox components resize.
• Gantt Current Time Indicator.
• Gantt Tasks Dependencies were not working correctly from the Dialog.
• Gantt Tooltip positioning did not work correctly.
• Blazor Chart Animation Property.
• Blazor Table's OnFilter event.
• Blazor Table's PageSize property did not work correctly.
• Grid Grouping. The Row events did not work correctly when grouping is applied.
• Grid "autoResizeColumns" method did not work correctly when there is a Date column.
• Grid dynamic states change when some of the states are with frozen columns.
• Grid Fixed paste in the filter row inputs.
• Kanban remove comment did not work correctly, when the current user is not set.
• Kanban "ensureVisible" method is not working correctly.
• Scheduler event resize when resources are applied.
• Scheduler Today button was not correctly resized when a different locale is used.
• Scheduler header buttons navigation did not behave property with fast clicks.

Smart UI v18.0.0 Release, Jan-24-2024

What's New:

• Grid Card view layout.
• Grid Computed columns with Formulas.
• Grid Column Editor with custom data source.

What's Improved:

• Grid Performance. The scrolling, data updates and mobile UX.
• Dropdownlist, ComboBox, Menus and other dropdowns UX animations & effects.
• Gantt day view now allows you to display hour, half hour and quarter slots.

What's Fixed:

• Fixed an issue in the Grid about column reorder in column groups.
• Fixed an issue in the Grid about autoHideGroupColumn option.
• Fixed an issue in the Grid related to the prepared sql queries.
• Fixed an issue in the Grid related to the dropdown when the Grid is inside a Window.
• Fixed an issue in the Grid related to the Filter row when Ctrl+A is used.
• Fixed an issue in the Grid related to the localization of the Data Exported currencies.
• Fixed an issue in the Grid related to the column reorder & toolbar rendering after removing the Grid from the DOM and them adding it again.
• Fixed an issue in the DockingLayout related to the state maitenance.
• Fixed an issue in the DockingLayout related to the dragging of text and images in a layout panel.
• Fixed an issue in the Gantt issue related to the rendering in Month view when monthScale = 'day'.
• Fixed an issue in the Gantt issue related to the firstDayOfWeek property.
• Fixed an issue in the Gantt dayScale which allows you to display hour, half hour and quarter in the Gantt's day view.
• Fixed an issue in the Gantt about task base line rendering in month and year views.
• Fixed an issue in the Scheduler issue is fixed related to the Timeline Month view when Event is resized.

The new release brings the following updates:

• Grid Card view layout.
• Grid Formulas support.
• Grid Performance boost.
• Grid mobile experience was improved.
• Grid optimizations about groups render.
• Grid issue is fixed about column reorder in column groups.
• Grid issue is fixed about autoHideGroupColumn option.
• Grid issue is fixed related to the prepared sql queries.
• Grid issue is fixed related to the dropdown when the Grid is inside a Window.
• Grid issue is fixed related to the Filter row when Ctrl+A is used.
• Grid issue is fixed related to the localization of the Data Exported currencies.
• DockingLayout issue is fixed related to the state maitenance
• DockingLayout issue is fixed related to the dragging of text and images in a layout panel.
• Grid new autoWidth and autoHeight layout properties.
• Gantt issue is fixed related to the rendering in Month view when monthScale = 'day'.
• Gantt issue is fixed related to the firstDayOfWeek property.
• Gantt dayScale which allows you to display hour, half hour and quarter in the Gantt's day view.
• Scheduler issue is fixed related to the Timeline Month view when Event is resized.
• Improved UX for Dropdownlist, ComboBox, Menus and other dropdowns. They were updated with new smooth animations.

We just added a new tutorial which will show you how to easily integrate Blazor MAUI with SmartUI - https://www.htmlelements.com/docs/blazor-maui/

Smart UI v16.0.1 Release, Aug-04-2023

What's Improved:

• Grid Rating, Duration & Time columns.
• Grid Column Type change. The grid has a new functionality which allows users to dynamically change the column type.
• Grid Grouping and dynamic addition of rows to groups. When the add new row functionality is turned on, Grid groups will display a button which adds a new row to the group.
• Grid Toolbar drop-downs browser bounds detection. Drop-downs will open above the Grid when there is no available space.
• Grid Appearance which allows users to show or hide cell lines within column groups.
• Grid Edit Row dialog dragging functionality.
• TextArea can be used as a Mention input by using the new "users" property.
• Grid select columns summary option which displays legend bars at the bottom of the Grid with the summary details in the column.
• Kanban tasks priority rendering.

What's Fixed:

• Fixed an issue about dispatch of component events in Vue 3.
• Fixed an issue about add/remove dynamic CSS class names in React components.
• Fixed an issue in the Grid about Date filter usage within the filter row. The filter was not working correctly when the Grid column has a custom cells formatting.
• Fixed an issue in the Grid about data grouping state maintenance after the data source is changed.
• Fixed an issue in the Grid about the load state when there are groups.
• Fixed an issue in the Grid about the "columnDragEnd" event's newIndex detail.
• Fixed an issue in the Grid about the "setColumns" method.
• Fixed an issue in the Grid sorting after setting dynamically the "columns" property.
• Fixed an issue in the Grid about the "createdBy" and "createdDate" column templates.
• Fixed an issue in the Grid about the selection when infinite scroll is enabled.
• Fixed an issue in the Grid about rendering emojis in grid cells.
• Fixed an issue in the Grid about data export to Excel when the export column is a Date column and it contains null values.
• Fixed an issue in the Data binding with JSON in the Grid, Scheduler, Kanban & Table components.
• Fixed an issue in the Gantt chart about the zoom in/out functionality.
• Fixed an issue in the FileUpload about the auto upload functionality.
• Fixed an issue in the Kanban about comments, checklist and column header rendering and escaping.
• Fixed an issue in the DateRangeInput calendar rendering with multiple months.
• Fixed an issue in the DateRangeInput when the locale is set.
• Fixed an issue in the DateRangeInput when the months property is set dynamically.
• Fixed an issue in the Form when the form is created and the same form element is used for another form instance.
• Fixed an issue in the Scheduler about the current time indicator. The current time indicator was not rendering dynamically as it should.
• Fixed an issue in the Scheduler about Repeat events in Angular.
• Fixed an issue in the Table to keep the expanded state of groups, when the data source updated.
• Fixed an issue in the Input, Textarea and DropDownList about setting a custom tabindex.
• Fixed an issue in the Input about selected item rendering, when the value contains script tags.
• Fixed an issue in the Dropdownbutton about setting a template as a placeholder.
• Fixed an issue in the Input and MulticomboInput components about Escape key handling.

Smart UI v15.2.1 Release, May-16-2023

What's New:

• Angular 16 support. We updated the "smart-webcomponents-angular" npm pacakge to support the latest version of Angular.

What's improved:

• Custom current time can be set up for Scheduler and Gantt components.
• Improved Gantt API for rendering tasks and projects. This allows developers to customize the appearance. Added a 'quarterFormat' property to customize the quarter views.
• Improved Editor API. Developers can easily add, remove and update tools from the editor.
• Improved Kanban tasks priority look and feel.

What's Fixed:

• Fixed an issue in the React Grid about state persistance.
• Fixed an issue in the Tabs when the component is used within a Web components from another vendor.
• Fixed an issue in the Scheduler when a custom time zone is used in the TimelineWeek view.
• Fixed an issue in the Grid with the subtasks editor.
• Fixed an issue in the React components about changing props with object or array type.
• Fixed an issue in the Grid about sanitizing row comments.
• Fixed an issue in the Grid about state persistance of expanded rows when the data source is dynamically changed.
• Fixed an issue in the Gantt about the firstDayOfWeek property in week view.
• Fixed an issue in the Gantt about the weekFormat property in month view.
• Fixed an issue in the Gantt about the dayFormat property in month view when the monthScale is set to "day".
• Fixed an issue in the Scheduler about the currentTimeIndicator in RTL mode.
• Fixed an issue in the Grid about the 'Tab' key and the 'change' event. The 'change' event was not raised.
• Fixed an issue in the Grid about the Checkbox editor when the 'Space' key is pressed.
• Fixed an issue in the Grid about the 'endEdit' event with checkbox editor.

We are happy to announce that we launched our new product called Artavolo. Artavolo puts the power of building a custom database in everyday user's hands. Artavolo is a modern online database service created for everyone, and it gives people the simplicity of a spreadsheet, tools for team collaboration, and a seamless mobile experience. We are just getting started on our mission to expand productivity by giving people simple and useful tools to organize their world. Artavolo is perfect for project management, collecting customer information, creating surveys, and planning events. All of this without any technical expertise. To learn more about Artavolo - https://artavolo.com/

Smart UI v14.4.0 Release, Sep-29-2022

What's New:

• Admin Template for Angular.
• Admin Template for React.

What's Improved:

• Grid Performance when rows are added dynamically.
• Grid Image column. Configuration options for the file upload are added.
• Query builder - sanitize html in input and select fields items. This avoids potential XSS attacks.
• ListBox - sanitize html in list items. This avoids potential XSS attacks.

What's Fixed:

• Grid about filtering with empty values.
• Grid about the paste and copy values when using editor which has dataSource such as DropDownList or ComboBox editor.
• Grid about the clipboard cut and delete when editing is disabled.
• Grid about the keyboard delete when editing is disabled.
• Grid about the columns property when the property is set dynamically and it contains frozen columns.
• Grid about cells styling when filtering is applied.
• Grid about grouping with empty rows. The rows visbile index was incorrect.
• Grid about the edit dialog in readonly mode when editing is disabled.
• ListBox about Filtering. The Listbox was not rendering correctly.
• Kanban about the custom data fields rendering.
• MultiComboInput about the selectedValues property not working correctly when set dynamically.
• Scheduler about View property not working in Angular 14.
• Table about browser window's resize. The rendering of the table when grouping is applied was not correct.
• Scheduler about the date change event.
• Calendar about the min date property. The property was with incorrect default value.
• DateInput about the Calendar popup. The min and max dates were not synchronized correctly.

We would like to ask you to complete a simple anonymous Online Survey that should take no more than 30 seconds. Thank you in advance for sharing your thoughts with us. We appreciate your time and effort in providing feedback to us.

We are happy to share with you that the latest Smart.Blazor NuGET package targets .NET 6.0 by default.
The code sample below shows how to create a Blazor WebAssembly app with .NET 6

Blazor WebAssembly (blazorwasm) Example

1. Create a blazor application:

dotnet new blazorwasm -o BlazorApp

2. Navigate to the application:

cd BlazorApp

3. Add the Smart.Blazor package:

dotnet add package Smart.Blazor

4. Open _Imports.razor and add the following at the bottom:

@using Smart.Blazor

5. Open wwwroot/index.html and add the needed styles and scripts.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Blazor WebAssembly App</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="_framework/scoped.styles.css" rel="stylesheet" />
    <link href="_content/Smart.Blazor/css/smart.default.css" rel="stylesheet" />
    <script src="_content/Smart.Blazor/js/smart.blazor.js"></script>
    <script src="_content/Smart.Blazor/js/smart.elements.js"></script>
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
	An unhandled error has occurred.
	<a href="" class="reload">Reload</a>
	<a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>

6. Open Pages/Index.razor and replace the code as follows:

@page "/"

@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
	<p><em>Loading...</em></p>
}
else
{
	<Table Selection="true" SortMode="TableSortMode.One" class="table">
		<table>
			<thead>
				<tr>
					<th>Date</th>
					<th>Temp. (C)</th>
					<th>Temp. (F)</th>
					<th>Summary</th>
				</tr>
			</thead>
			<tbody>
				@foreach (var forecast in forecasts)
				{
					<tr>
						<td>@forecast.Date.ToShortDateString()</td>
						<td>@forecast.TemperatureC</td>
						<td>@forecast.TemperatureF</td>
						<td>@forecast.Summary</td>
					</tr>
				}
			</tbody>
		</table>
	</Table>
}

@code {
	private WeatherForecast[] forecasts;

	protected override async Task OnInitializedAsync()
	{
		forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
	}

	public class WeatherForecast
	{
		public DateTime Date { get; set; }

		public int TemperatureC { get; set; }

		public string Summary { get; set; }

		public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
	}
}

7. Edit Program.cs

using BlazorApp;  
using Microsoft.AspNetCore.Components.Web;  
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;  
using Smart.Blazor;  
var builder = WebAssemblyHostBuilder.CreateDefault(args);  
builder.RootComponents.Add<App>("#app");  
builder.RootComponents.Add<HeadOutlet>("head::after");  
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });  
builder.Services.AddSmart();  
await builder.Build().RunAsync(); 

8. Start the app and check the result

dotnet watch run

Wait for the app to display that it's listening on http://localhost:5000 and then, open a browser and navigate to that address.
Once you get to the following page, you have successfully run your first Blazor WebAssembly app using Smart UI for Blazor Components!

Output

Smart UI v14.0.0 Release, Apr-18-2022

What's New:

• Barcode - new Barcode component.
• QR code - new QR code component.

What's Fixed:

• Kanban - updated kanban scss. The new change enables additional style for the Kanban board.
• Kanban - new columnWidth property. Allows horizontal scrolling in Kanban boards.
• Kanban - new dialogRendered property. Allows custom dialogs for Kanban boards.
• Window - new API for move, updateContent, updateLabel.
• Input - bug fix for selectedValues.
• Grid - autoHideGroupColumn bug fix. The column did not appear after the group is removed.
• Grid - sort problem in tree grid mode. Sorting was not operating correctly when the Grid was in tree mode.
• Grid - undo/redo enable after init. Undo-redo is now enabled after the Grid is fully initialized.
• Table - filtering, column menu and virtualization wrong rendering.
• Input - create from option tag.