Questions & Help>Questions

Phoenix component library visualizer?

/phoenix#visualization
chukinas

chukinas

Phoenix component library visualizer?

I’m looking to improve this /ui page my company uses for previewing our custom html helpers (see below). I’m curious if anyone can answer one or both of these questions:

  1. Is there an existing Phoenix library for previewing html components?
  2. Is there an existing elixir library that would handle the rendering of code? Right now we do it with a lot of pattern matching and custom css. I feel like maybe that’s already been solved.

Many thanks in advance!

image
image656×1243 69.3 KB

3 comments
/phoenix#visualization
8 664 3

Most Liked Responses

cblavier

cblavier

We did code it ourselves. Here is our storybook, we use it to showcase our liveview components and as a documentation as well.

4
Post #3
thiagomajesk

thiagomajesk

I think a catalog is on the roadmap for LiveView but I don’t know about the progress on it though, you might want to check the official repo: HEEx roadmap · Issue #1506 · phoenixframework/phoenix_live_view · GitHub.

2
Post #2
chukinas

chukinas

Storybook, that’s right! I’d forgotten what it was called in React-land.

Very nice site, @cblavier! Love it.

2
Post #4

Where Next?

View thread on forum (has 3 responses!)
phoenix
visualization
Home Questions & Help>Questions
/phoenix#visualization
8 666 3
Last post

Popular in Questions Top

senggen
Questions & Help>Questions

How to fix *Bad argument in call to erlang:'++'(<<"xxx/crash.log">>, ".3") in lager_rotator_default:rotate_logfile/2 line 84*
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
#production#error#log
2 46367 2
New
Tee
Questions & Help>Questions

Enumerables - how does Enum.reduce work with maps
can someone please explain to me how Enum.reduce works with maps
#erlang
18 14791 13
New
electic
Questions & Help>Questions

DateTime Format to string?
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
#datetime
19 24892 16
New
nobody
Questions & Help>Questions

How to bind phoenix app to specific ip address?
How to bind a phoenix app to a specific ip address? could not find anything about that, nowhere, unfortunately, but for me this is quite...
/phoenix
17 19893 18
New
JulienCorb
Questions & Help>Questions

Protocol Enumerable not implemented for
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: &lt;h1&gt;Create Post&lt;/h1&gt; &lt;%= ...
/phoenix
4 14941 7
New
alice
Questions & Help>Questions

What are the main benefits of Elixir compared to Clojure?
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
#clojure
229 33752 47
New
aalberti333
Questions & Help>Questions

Enum.map over list of key/value pairs with a map as the value
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
#enummap
7 19866 6
New
romenigld
Questions & Help>Questions

Docker run Error loading shared library libstdc++.so.6 and libgcc_s.so.1
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
/phoenix#deployment#docker-compose
30 20317 15
New
jononomo
Questions & Help>Questions

Websocket connection works on localhost, but get 403 error when deployed via docker
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
/phoenix#channels
8 26815 12
New
svb
Questions & Help>Questions

Form submit on Enter keypress for textarea input type
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
/phoenix#liveview
1 13284 6
New

Other popular topics Top

danschultzer
News>Announcing

Pow - Robust, modular, extendable user authentication and management system
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
/phoenix#authentication#library#authorization#user_system#pow
548 29377 241
New
mcarvalho
Questions & Help>Questions

System.get_env vs. Application.get_env
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
#environment
13 17200 6
New
albydarned
Questions & Help>Questions

Erlang and Elixir on Apple Silicon/M1 Chip
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
#erlang#troubleshooting
121 25019 65
New
AstonJ
Chat & Discussions>Polls

Which Neovim configuration distro do you use/recommend? (Poll)
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
#polls#code-editors#neovim
79 13941 31
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? Ecto.Repo — Ecto v3.14.0 has exampl...
#ecto#optimization#delete-method
22 16944 8
New
dokuzbir
Questions & Help>Questions

Visual Studio Code - how to highlight html closing tags in html.eex?
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
/phoenix#eex#troubleshooting#code-editors
12 21005 3
New
SoCreat
Questions & Help>Questions

What's the best ide/editor for elixir in 2021?
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
#ide
68 37718 26
New
Emily
Questions & Help>Questions

How To Get Phoenix & VueJS working Together?
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
/phoenix
93 22614 42
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 78595 2
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 32626 16
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

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

Real-time error tracking, performance insights, and observability for devs.

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.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

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