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!

View thread on forum
/livebook
5 317 0

Where Next?

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

Popular in Guides/Tuts Top

hlx
Learning Resources>Guides/Tuts/Tips/Info

Roll your own Email & Password Authentication with Guardian, Comeonin & Phoenix
Typed my very first blog post ever, hope it will help some people https://henricus.xyz/roll-your-own-email-password-authentication-with...
/phoenix#authentication#blog-posts
12 2308 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 1843 4
New
bennydreamtech23
Learning Resources>Guides/Tuts/Tips/Info

How to Use OpenTelemetry, PromEx, and Promtail to Build an Observability System with OpenObserver Exporter in Elixir
Observability is a key part of building scalable and maintainable applications. Today, I want to share how to set up one of the most powe...
/phoenix#ecto#learning-elixir#liveview#opentelemetry
20 811 0
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 2508 1
New
jtormey
Learning Resources>Guides/Tuts/Tips/Info

Helpful VSCode snippets for building with LiveView
Hello! Having written a lot of LiveView code, I’ve made some VS Code snippets to speed up writing callbacks for LiveViews and LiveCompon...
#code-editors#vscode#liveview
13 1165 2
New
berts-4865
Learning Resources>Guides/Tuts/Tips/Info

DigitalOcean Spaces - Browser Upload with Presigned URL - CORS
Here is a quick guide to uploading a file from the browser to DO spaces. It is crude, but will hopefully save sometime time and frustrat...
#digital-ocean
1 1805 0
New
f0rest8
Learning Resources>Guides/Tuts/Tips/Info

Tip for rendering forms per row in a table (e.g. the new phx 1.7 table component)
Hi, TLDR: form attribute set on the input fields and button submit. I just wanted to share a solution I discovered when making live inl...
#liveview#form
7 1029 2
New
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 i...
#otp#design
29 2941 6
New
mhanberg
Learning Resources>Guides/Tuts/Tips/Info

Implementing API Authentication with Guardian in Phoenix
Hi! I recently finished adding authentication to my Phoenix API, so I wanted to share what I learned. I haven't created authentication ...
mitchellhanberg.com
/phoenix#authentication#api
21 4683 9
New
nietaki
Learning Resources>Guides/Tuts/Tips/Info

Workaround for Docker with Erlang/OTP 21.3
Just a quick heads up: There seems to be a bug in Erlang/OTP 21.3, which can cause some errors when making http requests. If you’re using...
#erlang#docker#deployment#devops
33 3311 8
New

Other popular topics Top

vertexbuffer
Questions & Help>Questions

Deleting item from a list
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
7 24271 4
New
sorentwo
News>Announcing

Oban - Reliable and Observable Job Processing
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
/oban#ecto#postgres#job-processing
985 42842 311
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 21895 15
New
lessless
Questions & Help>Questions

How are you dealing with CSV files that uses CR line breaks?
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
#how-to-question
10 18583 17
New
johnnyicon
Questions & Help>Questions

How do I use the Postgres JSONB / Postgrex JSON extension?
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
#ecto
22 17646 9
New
fireproofsocks
Questions & Help>Questions

Ecto delete a record WITHOUT selecting first
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
#ecto#optimization#delete-method
22 16932 8
New
jerry
Questions & Help>Questions

Ecto query using like/ilike in query
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
#ecto
17 16855 10
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 78576 2
New
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 35953 110
New
Brian
Questions & Help>Questions

Import a module from a file into IEX
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
#iex
35 32612 16
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

Manning

Develop your skills with books, videos, and courses.

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.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

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

View all our sponsors ❯

Categories:

Sub Categories:

Forums

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.

Manning

Develop your skills with books, videos, and courses.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyewWorks

Enabling companies to succeed by building software people love.

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