:orphan:

.. toctree::
   :maxdepth: 1
   :hidden:

   basic
   intermediate

######################
Add a web UI with HTML
######################
**Audience:** Users who want to add a web UI using plain html.

**Prereqs:** Basic html knowledge.

.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
   :header: 1: Connect HTML
   :description: Learn how to connect an HTML app.
   :col_css: col-md-6
   :button_link: basic.html
   :height: 150
   :tag: basic

.. displayitem::
   :header: 2: Enable two-way communication
   :description: Enable two-way communication between HTML and a Lightning App.
   :col_css: col-md-6
   :button_link: intermediate.html
   :height: 150
   :tag: [docs coming soon]

.. raw:: html

        </div>
    </div>

----

********
Examples
********
Here are a few example apps that use an HTML web UI.


.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. Add callout items below this line

.. displayitem::
    :header: Example 1
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 2
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. displayitem::
    :header: Example 3
    :description: Show off your work! Contribute an example.
    :col_css: col-md-4
    :button_link: ../../../contribute_app.html
    :height: 150
    :tag: Waiting for contributed example

.. raw:: html

        </div>
    </div>