Web Components Docs

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

What is Smart HTML Elements?

  • Framework similar to Polymer and based on Javascript, HTML and CSS which allows you to create your own Custom Elements.

    The Framework's default 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: https://www.htmlelements.com/docs/base-element/ for additional details about it.


    Create Custom Element

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


  • UI Toolkit with 60+ Custom Elements including Grids, Charts, Gantt, Layouts, created by our Team. All Web Components are designed from ground-up and based on a powerful framework core.



Works across devices and browsers

Smart HTML Elements is mobile-first UI Framework written in Javascript Ecmascript 6(ES6), HTML5 and CSS3. Smart HTML Elements targets only modern Web browsers and devices.



Download and Installation

  • Download Smart HTML Elements - The .zip download contains source files and demos.
  • npm i @smarthtmlelements/smart-elements-community - Free Community version source files.
  • npm i @smarthtmlelements/smart-elements - Enterprise(Professional) version source files.
  • npm i @smarthtmlelements/smart-custom-element - Library for Custom Elements Development


  • 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
    • 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: https://www.htmlelements.com/docs/
  • Other files

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