hugobarauna / kino_code_input

KinoSmartcellTemplate

This is a template project for making an Elixir Kino Smart Cell module for use in Livebook. Uses the following stack:

• Vite as the build system
  • You can elect to use any front-end framework you desire by adding its requisite Vite Plugin.
• TailwindCSS for CSS / Styling
  • Uses the color palette provided by the official Livebook team from the kino_bundler package

For an example of a project built using this template, you can refer to Merquery, which uses the Vite Vue Plugin

Directory Structure

.
├── README.md
├── assets -------------------------> Includes JS development files (can be excluded in release)
│   ├── package.json
│   ├── postcss.config.js
│   ├── src
│   │   ├── main.css
│   │   └── main.js
│   ├── tailwind.config.js ---------> Tailwind Config including the Livebook color palette
│   └── vite.config.js -------------> Vite config specific to building for a Kino.SmartCell
├── lib ----------------------------> Contains Elixir files (/build folder will be generated in this dir)
│   ├── application.ex -------------> Registers smart cell(s) to be exposed
│   └── kino_smartcell_template.ex -> Contains smart cell implementation
└── mix.exs

Usage

1. Create a new repo from this template as shown here
2. Clone a local copy
3. Change all references to kino_smartcell_template and KinoSmartCellTemplate to your application's name
4. From within the lib/assets directory run npm i to install dependencies.
   1. Optionally add any plugins or other dependencies you need
5. From within lib/assets run npm run dev to start a watchful Vite build. Now when you make changes they will automatically be rebuilt by Vite. Note that you will still need to reload the smart cell from Livebook to register the changes to the build

Building for Release

From within the assets folder run npm build and the minified/bundled releases will be put into /lib/build/ and be built for production.