Learning Resources>Guides/Tuts/Tips/Info

Livebook SmartCell Starter Template

/livebook
acalejos

acalejos

Livebook SmartCell Starter Template

I’ve been working a lot with Livebook as of late and especially with Kino. I found myself making a lot of Kinos with similar boilerplate, so I decided to make it into a template so anyone can use to get started. This is the same stack I’m currently using for my Postman-esque SmartCell (Merquery), and I’ve been quite happy with it.

It 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

It also includes some comments and suggestions for building out your SmartCell behaviour for those who are new to it.

Enjoy!

https://github.com/acalejos/kino_smartcell_template

View thread on forum
/livebook
351 0

Where Next?

View thread on forum
livebook
Home Learning Resources>Guides/Tuts/Tips/Info
/livebook
5 351 0
Last post

Popular in Guides/Tuts Top

smpallen99
Learning Resources>Guides/Tuts/Tips/Info

Beginner Hint: Using GenServers
Some advice for Elixir programmers. I was reviewing someone’s Elixir Code yesterday and found a deadlock condition bug in a GenServer im...
#otp#design
29 2987 6
New
anuragg
Learning Resources>Guides/Tuts/Tips/Info

Clustering in Elixir 1.9 with Mix Releases and libcluster
We just published a guide to automatic clustering in Elixir 1.9, with Mix releases and libcluster. The cluster automatically discovers n...
/phoenix#cluster#libcluster#render
17 2622 2
New
magnetic
Learning Resources>Guides/Tuts/Tips/Info

Configuring VSCode to use with Elixir and Phoenix Templates
Hey :waving_hand:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and ...
#phoenix_html#vs-code#vscode-elixir#elixir-ls
43 17321 15
New
stryrckt
Learning Resources>Guides/Tuts/Tips/Info

Creating LiveView Modals with Tailwind CSS and Alpine.js
I just published an article on creating Phoenix LiveView modals using Tailwind CSS and AlpineJS.
/phoenix#javascript#liveview#tailwindcss#alpinejs
9 2538 1
New
annad
Learning Resources>Guides/Tuts/Tips/Info

LiveView and Phx.Gen.Auth: How to have an unauthenticated liveview pass to an authenticated one
I’m posting this for developers who are totally new to Phoenix like myself. This is all probably obvious to more skilled Phoenix develope...
/phoenix#liveview
9 1987 2
New
f0rest8
Learning Resources>Guides/Tuts/Tips/Info

New Ecto "How-To" Guide: Self-referencing many to many
Hi everyone, Just wanted to say that the new Self-referencing many to many guide is now up on the official Hex docs (at least I just not...
#ecto#many-to-many-association
19 1896 4
New
sergio
Learning Resources>Guides/Tuts/Tips/Info

Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
/phoenix#liveview
137 18042 35
New

Other popular topics Top

KronicDeth
News>Announcing

IntelliJ Elixir - Elixir plugin for JetBrain's IntelliJ Platform
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
#library#intellij
289 36654 110
New
JakeBecker
Chat & Discussions>Discussions

ElixirLS - the Elixir Language Server
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
#elixir-ls
1144 54921 245
New
gshaw
Questions & Help>Questions

Idiomatic guard clause for checking not nil
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
#guard-clauses
13 43711 3
New
sen
Questions & Help>Questions

How to set environment variables in dev.exs?
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
/phoenix
31 22221 15
New
JorisKok
Questions & Help>Questions

How is it possible to get 2 million websocket connections when you have 65536 available ports?
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
/phoenix
20 19385 4
New
jason.o
Questions & Help>Questions

No such input `xxxxx` for action ResourceName1.create
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
/ash
3 78754 2
New
Back to top

Latest Livebook Threads

Livebook Forum ❯

Learning Resources>Guides/Tuts/Tips/Info

Resources Guides/Tuts ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking for Elixir devs who love to ship. Start your free account.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Manning

Develop your skills with books, videos, and courses.

WyewWorks

Enabling companies to succeed by building software people love.

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement