Embed Paint Ninja on your Website
Get help creating art with Paint Ninja.
Paint Ninja is a free online drawing app that lets you create art in your browser.
You can embed the Brush Ninja drawing app on your website. This is a great way to engage your users and get them to interact with your site. To embed the drawing app, just copy the code below and paste it into your website.
<script src="https://embed.brush.ninja/drawing.js"></script>
<brush-ninja-drawing></brush-ninja-drawing>
Properties
- width - The width of the drawing app. Defaults to 100%.
- height - The height of the drawing app. Defaults to 600px. Keep in mind the larger sizes may not fit on small screens (phones and tablets etc).
- image - The URL of an image to open when the app loads. This can be drawn on and edited.
<brush-ninja-drawing
width="800px"
height="600px"
image="https://example.com/image.jpg"
></brush-ninja-drawing>
Tips
- The
<script>tag can be placed anywhere on your page, but should only be added once. - The
<brush-ninja-drawing>tag can be placed anywhere on your page, and any number of times. It will be replaced with the drawing app. Keep in mind that it’s a javascript app and the more copies you include the slower your page will get. - You can pass classes to the
<brush-ninja-drawing>tag to style it. For example,<brush-ninja-drawing class="my-class"></brush-ninja-drawing>. These classes will be applied to the iframe holding the app.
Tell me All About it!
If you use it then please do let me know on Twitter, Mastodon, or Bluesky (or Contact me). I would love to see it in action!