Skip to main content

Render DOM elements inside a canvas stage

How to put DOM elements (like inputs or divs) inside of a Konva stage?​

If you want to have some DOM nodes as part of your canvas tree you can use <Html /> component from react-konva-utils package.

Remember that DOM nodes are not direct children of Konva containers. <Html /> is just a wrapper to work with a Portal-like API. HTML content will be not visible if you try to export canvas as image.

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
import { Html } from 'react-konva-utils';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Html>
          <input placeholder="DOM input from Konva nodes" />
        </Html>
        <Rect
          x={20}
          y={20}
          width={50}
          height={50}
          fill="red"
          shadowBlur={5}
        />
      </Layer>
    </Stage>
  );
};

export default App;