ha-lovelace-ts

lovelace_ts - HA Lovelace Config as TypeScript

Usage

1. Setup a Node devenv - make sure you have nodejs and yarn installed, create a directory, run yarn init and yarn add ha-lovelace-ts
2. Setup your tsconfig.json file with at least these parameters:

   {
       "compilerOptions": {
           "rootDir": ".",
   
           "jsx": "react",
           "jsxFactory": "h",
           "jsxFragmentFactory": "Fragment",
       },
   }
   

3. Create an index.tsx file and start writing your UI. Here's an example:

   import { render, h } from 'ha-lovelace-ts'
   
   async function Blah() {
       return <area area='Blah' />
   }
   
   export default render(<dashboard title='Robert'>
       <view title='Hia' path='phil' type="masonry">
           <horizontal_stack>
               <entities entities={['a', 'b']} />
           </horizontal_stack>
       </view>
       <view title='Hia' path='phil'>
           <Blah />
       </view>
   </dashboard>)
   

4. Compile - run yarn lovelace_ts build index.tsx output.yml
5. Copy the generated file to your HA instance

Contributing Card Definitions

Take a look at src/contrib and look at the existing definitions as examples.