Chat & Discussions>Discussions

Demo of FabricJS, PDFJS and PDFLib Integration with Phoenix LiveView

/phoenix#liveview#demo#fabric
crockwave

crockwave

I created a repo to demonstrate the integration of fabric.js, PDFLib.js and pdf.js with Phoenix LiveView, using a LiveView Hook.

crockwave/fabric_hook: Demonstrates integration of fabric.js, pdf.js and PDFLib.js with Phoenix LiveView (github.com)

Created with Phoenix 1.6.0

It demonstrates the following:

  • Fabric.js pdf.js and PDFLib.js LiveView integration
  • Fabric.js hook in app.js
  • Creates a new default 2 page PDF on page load using PDFLib
  • Fabric annotation layer on top of the PDF file viewer
  • Using a Fabric brush to draw objects of varying widths and colors
  • Uploading a PDF into the viewer
  • Selecting, rotating, moving and scaling drawn Fabric objects
  • Moving selected Fabric object using arrow keys and Shift-arrow keys
  • Deleting selected Fabric object using the Del key
  • Maintain layers oriented during window resize events

Screenshot 2023-04-01 065725
Screenshot 2023-04-01 0657251073×941 85.7 KB

6 comments
/phoenix#liveview#demo#fabric
3098 6

Showing Posts 1 to 6

ghenry

ghenry

Got this error?


[info] Running FabricHookWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.12.18.tgz
[info] Access FabricHookWeb.Endpoint at http://localhost:4000
 > js/app.js:28:23: error: Could not resolve "fabric" (mark it as external to exclude it from the bundle)
    28 │ import { fabric } from "fabric"
       ╵                        ~~~~~~~~

 > js/app.js:29:19: error: Could not resolve "jquery" (mark it as external to exclude it from the bundle)
    29 │ import jQuery from 'jquery'
       ╵                    ~~~~~~~~

2 errors
[watch] build finished, watching for changes...
0
Post #1
ghenry

ghenry

Then this? I don’t think this is right?

Screenshot from 2023-04-01 15-27-05
Screenshot from 2023-04-01 15-27-05697×1063 35.3 KB

0
Post #2
crockwave

crockwave OP

Reference the Readme.md. You need to install fabric using npm from your assets folder

JQuery should be picked up by the script reference inside the heex file

fabric_hook/page_fabric.html.heex at master · crockwave/fabric_hook (github.com)

Screenshot 2023-04-01 093223
Screenshot 2023-04-01 093223703×383 15.6 KB

2
Post #3
ivanhercaz

ivanhercaz

I will test it as soon as possible! Thank you for share it, @crockwave!

1
Post #4
ghenry

ghenry

Ah, I’m used to not doing that and didn’t notice the readme or package.json :slight_smile:

1
Post #5
ghenry

ghenry

Works now. Really nice! Will help me learn more about Hooks as I’m doing some cal-heatmap things. Thanks for sharing.

2
Post #6
— All posts loaded —

Where Next? Top

View thread on forum (has 6 replies!)
phoenix
liveview
demo
fabric
Home Chat & Discussions>Discussions
15 2961 6
Last post
REPLY VIEW THREAD WITH 6 POSTS

Trending in Discussions Top

AstonJ
Chat & Discussions>Discussions

What Elixir related stuff are you doing?
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
#community
2977 92995 915
New
caslu
Chat & Discussions>Discussions

My thoughts on Ash
I want to open this thread for you all to discuss and help those who really like Ash but are still hesitant to use it in a real project. ...
/ash#ash-chat#ash-authentication
258 6352 33
New
mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
168 5507 69
New
GES233
Chat & Discussions>Discussions

Can the ideas from DeepSeek Harness be transferred to Elixir eco?
I’m posting this in response to Jose’s recent tweet (Cr. link) : People are sleeping on Elixir for a coding harness: Hot-code swappi...
#deepseek#harness-engineering
2 646 4
New
marciol
Chat & Discussions>Discussions

Companies that hire candidates without prior Elixir experience
It would be helpful to have a list of companies worldwide that hire engineers without prior experience in Elixir. Often, it can be quite ...
#discussion#jobs#hiring-process
15 519 6
New
durvia
Chat & Discussions>Discussions

Building an AI agent runtime moving from TypeScript to Elixir/OTP - can you help/compare notes?
Anyone running long-lived stateful processes on BEAM? We’re building an AI agent runtime and would love to compare notes. We’re a small ...
#learning-elixir#ai-agents
8 462 6
New
AstonJ
Chat & Discussions>Discussions

Biocomputing and Elixir/the BEAM?
This might be a bit disturbing for some but it’s happening - computers running on living human neurons. They’ve made them smart enough t...
#biocomputing#dishbrain#cl1#cortical-labs
2 199 1
New

Other Trending Topics Top

marciok
News>Announcing

Gust - A task orchestration system built in Elixir
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
/phoenix/oban#library#workflow#background_job#reactor
111 4469 40
New
jimsynz
News>Announcing

Beam Bots - Resilient Robotics on the BEAM
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
/beam-bots#library#robotics#bb
119 2916 28
New
Dmk
News>Announcing

Xamal - Deploy Elixir releases to bare metal servers via SSH
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
#library#deployment#deploy#deployments#xamal
75 2512 33
New
Damirados
News>Announcing

Emerge & Solve - a GUI framework for Elixir
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
/nerves#library#frameworks#gui#native#state
59 2300 23
New
netoum
News>Announcing

Corex - Accessible and unstyled UI Phoenix components
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
/phoenix#library#ui#liveview#hooks#accessibility#component#tableau
63 2662 20
New
webofbits
News>Announcing

Aludel - LLM prompt evaluation workbench
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
/phoenix#library#liveview#ai
27 1761 40
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Chat & Discussions>Discussions

Chat Discussions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

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, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

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

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, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

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

Options

Thread Display Mode




Thread Preview

Skip Thread Previews