                   (.addClef "treble")
                   (.addTimeSignature "4/4")
                   (.setContext context))
+        notes (phrase->notes phrase)
         voice (js/Vex.Flow.Voice. #js {:num_beats (num-beats phrase) :beat_value 4})]
-    (.addTickables voice (phrase->notes phrase))
+    (.addTickables voice (clj->js notes))
     (-> (js/Vex.Flow.Formatter.)
         (.joinVoices #js [voice])
         (.format #js [voice] 400))
     (.draw stave)
-    (.draw voice context stave)))
+    (.draw voice context stave)
+    notes))
 
 (defn build-context [el]
   (let [vf (js/Vex.Flow.Renderer. el js/Vex.Flow.Renderer.Backends.SVG)

    (.resize vf 500 150)
    context))

(defn notation [phrase]
  (let [context (r/atom nil)]
    (r/create-class
     {:display-name "notation"
      :component-did-mount
      (fn [this]
        (let [c (build-context (r/dom-node this))]
          (reset! context c)
          (render-phrase c (:music (r/props this)))))
      :component-will-update
      (fn [this]
        (let [c @context]
          (.clear c)
          (render-phrase c (:music (r/props this)))))
      :reagent-render
      (fn [phrase]
        [:div])})))

                               :duration (str (/ 1 duration))}))

(defn phrase->notes [phrase]
  (map build-note phrase))

(defn num-beats [phrase]
  (* 4 (reduce + (map :duration phrase))))
