  |
   |
 |
|---|
textmode.export.js is an add-on library for textmode.js that adds various export options to your Textmodifier instance, including:
- Plain text (
.txt) - JSON layer data (
.json) - Image files (
.png,.jpg,.webp) - Animated image files (
.gif) - Video files (
.webm) - Scalable vector graphics (
.svg)
Besides exporting programatically, textmode.export.js also provides an overlay UI for users to easily export their creations.
- The latest
textmode.export.jsversion requirestextmode.jsv0.7.0 or later.
To use textmode.export.js in a UMD environment, download the latest umd build from the GitHub releases page or import it directly from a CDN like jsDelivr. The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>textmode.js sketch</title>
<!-- Import textmode.js from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js"></script>
<!-- Import textmode.export.js from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/textmode.export.js@latest/dist/textmode.export.umd.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>// sketch.js
const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
plugins: [ExportPlugin],
});
t.setup(() => {
// Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')
});
t.draw(() => {
t.background(32); // Dark gray background
t.char('A');
t.charColor(255, 0, 0); // Cover the top-left quarter of the grid with a rectangle of red 'A's
t.rect(0, 0, t.grid.cols / 2, t.grid.rows / 2);
// ...add your drawing code here!
if (t.frameCount === 60) {
t.saveCanvas({
format: 'png',
filename: 'my-sketch',
});
}
});
// Control the export overlay UI at runtime
// t.exportOverlay.hide(); // Hide the overlay
// t.exportOverlay.show(); // Show the overlay
// t.exportOverlay.toggle(); // Toggle visibility
t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});To use textmode.export.js in an ESM environment, you can install it via npm:
npm install textmode.export.jsThen, you can import it in your JavaScript or TypeScript files:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>textmode.js sketch</title>
</head>
<body>
<script type="module" src="./sketch.js"></script>
</body>
</html>// sketch.js
import { textmode } from 'textmode.js';
import { ExportPlugin } from 'textmode.export.js';
const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
plugins: [ExportPlugin],
});
t.setup(() => {
// Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')
});
t.draw(() => {
t.background(32); // Dark gray background
t.char('A');
t.charColor(255, 0, 0); // Cover the top-left quarter of the grid with a rectangle of red 'A's
t.rect(0, 0, t.grid.cols / 2, t.grid.rows / 2);
// ...add your drawing code here!
if (t.frameCount === 60) {
t.saveCanvas({
format: 'png',
filename: 'my-sketch',
});
}
});
// Control the export overlay UI at runtime
// t.exportOverlay.hide(); // Hide the overlay
// t.exportOverlay.show(); // Show the overlay
// t.exportOverlay.toggle(); // Toggle visibility
t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});Now that you have textmode.export.js set up, you can explore the following resources to learn more about its features and capabilities:
๐ Visit the Official Documentation for a detailed guide on how to use the textmode.export.js and all its features.
๐ Browse the TypeDoc API reference hosted right here in the repository for in-depth API details.
textmode.export.js packages webm-writer-js by Nicholas Sherlock to provide WebM video export support. webm-writer-js is distributed under the WTFPL v2 license.
Animated GIF export relies on gifenc by Matt DesLauriers, available under the MIT License.
