Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


This component takes a <svg> at first, and let us able to draw each step, beat and measure lines at once. The component handle multiple time signature with the stepsPerBeat, beatsPerMeasure attributes.
This component is a lot inspired of FL Studio (obviously).

Demo (CodePen)


Methods :

  • .pxPerBeat( pxBeat<Number>

    This method is used to zoom on the SVG by modifying the background-size, if we call .pxPerBeat( 64 ) each viewBox's beats has a width of 64px.

  • .timeSignature( beatsPerMeasure<Number>, stepsPerBeat<Number> )

    This method will specify the time signature to the SVG, by default it's (4, 4). The measures are represented by a strong line on our canvas, the beats by a normal line and the steps (who are the beat's subparts) by a smaller line.

  • .render()

    Generate a SVG URL. This URL is set as the background of the component sent in parameters to gsuiBeatlines.


  • fill: #000;

    Changing the fill property to choose your own color for the measures/beats/steps bars.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.