Docs & Learning Resources

Create your own Modern Mobile-first Custom Elements or use our Framework Agnostic UI Toolkit

What is Smart?

  • Framework similar to Lit Element and based on Javascript (ES6), HTML and CSS which allows you to create your own Web Components.

    The Framework's root class is called Smart.BaseElement. The Smart.BaseElement class extends the native HTMLElement class adding additional features like:
    • Data Binding
    • Reactivity System
    • Cross-Browser and Device compatible event system
    • Event Routing
    • Style Change Notifications
    • Resize Notifications
    • Browser and Device detection API
    • Property Type detection API
    • Observable Objects
    • Observable Arrays
    • Localization
    • Property Change notifications
    • Typed properties
    • Templates
    • Property Bindings
    • Nested Elements with Automatic Property and Event Bindings
    • Automatic Event Listeners and Memory Leak resolutions
    • Lifecycle callbacks
    • Date and Numeric API for Engineering and Scientific Apps
    • Conditional Formatting API a.k.a. MS Excel
    • Data Export to Excel, CSV, TSV, HTML and PDF
    Visit: for additional details about it.

    Create Custom Element

     Smart('smart-hello', class SmartHello extends Smart.BaseElement {   
      // Declare properties  
      static get properties() {   
       return {  
           value: 'World!',  
           type: 'string'  
      // Define a template  
      template() {  
        return '<p>Hello, <span>{{name}}</span></p>';  

  • UI Toolkit with 60+ Web Components & Custom Elements including Grids, Charts, Gantt, Kanban, Layouts, created by our Team. All Web Components are designed from ground-up and based on a powerful framework core. 14 Light & Dark Material Design Themes are available. You can create custom themes by using our Theme Builder.

Works across devices and browsers

Smart is mobile-first UI Framework written in Javascript Ecmascript 6(ES6), HTML5 and CSS3.

Works with your framework

Smart UI is available for Web Components, Angular, React and Vue. Typescript definitions are available for all UI components. It easily integrates with Bootstrap, Blazor, Sharepoint, Ionic, Meteor and others.

Download and Installation

  • Download Smart HTML Elements - The .zip download contains source files and demos.
  • npm i smart-webcomponents-community - Free Community version source files.
  • npm i smart-webcomponents - Enterprise(Professional) version source files.
  • npm i smart-webcomponents-angular - Enterprise(Professional) for Angular source files
  • npm i smart-webcomponents-react - Enterprise(Professional) for React source files

  • The SDK files are located in the source directory

    In general you need to use files from this directory only.

    Files list & description:

    Files required in all projects using the SDK
    • smart.element.js: Smart HTML Elements framework
    • source/modules/smart.[component].js: Smart Web Component
    • angular/[component]: Smart Angular Module
    • react/[component]: Smart React Component
    • Stylesheet files. Include at least one stylesheet Theme file and the images folder:
    • styles/smart.default.css: Stylesheet for the default Material Theme. The smart.default.css file should be always included in your project.
    • styles/images: contains images referenced in the stylesheet files
    Files for elements. Include depending on project needs:
    • smart.elements.js: Commercial Custom Elements
    • smart.[component].js: Import in your project
  • Examples

    Individual Web components examples are located in the /demos folder.
  • Documentation

    Browse the documentation online:
  • Other files

    The /scripts, /images, /styles folders contain the files used by the demos only.