visx text

Usage no npm install needed!

<script type="module">
  import visxText from 'https://cdn.skypack.dev/@visx/text';



The @visx/text provides a better SVG <Text> component with the following features

  • Word-wrapping (when width prop is defined)
  • Vertical alignment (verticalAnchor prop)
  • Rotation (angle prop)
  • Scale-to-fit text (scaleToFit prop)


Simple demo to show off a useful feature. Since svg <text> itself does not support verticalAnchor, normally text rendered at 0,0 would be outside the viewport and thus not visible. By using <Text> with the verticalAnchor="start" prop, the text will now be visible as you'd expect.

import React from 'react';
import { render } from 'react-dom';
import { Text } from '@visx/text';

const App = () => (
    <Text verticalAnchor="start">Hello world</Text>

render(<App />, document.getElementById('root'));


npm install --save @visx/text