Demo of FabricJS, PDFJS and PDFLib Integration with Phoenix LiveView

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 (

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


Got this error?

[info] Running FabricHookWeb.Endpoint with cowboy 2.9.0 at (http)
[debug] Downloading esbuild from
[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...

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

Reference the 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 (


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

1 Like

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

1 Like

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