textmode.export.js
v1.2.0
Published
Export plugin for textmode.js - Save your creations as images, GIFs, videos, SVG, and plain text.
Maintainers
humanbydefinitionReadme
textmode.export.js (✿◕‿◕)ﾉ
| 
textmode.export.js is an add-on library for textmode.js that adds various export options to your Textmodifier instance, including:
- Plain text (
.txt) - 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.
Installation
Prerequisites
textmode.export.jsrequirestextmode.jsv0.4.0 or later.
UMD
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: [
createTextmodeExportPlugin({
overlay: false
})
]
});
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'
});
}
});
t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});ESM
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 { createTextmodeExportPlugin } from 'textmode.export.js';
const t = textmode.create({
width: window.innerWidth,
height: window.innerHeight,
fontSize: 16,
frameRate: 60,
plugins: [
createTextmodeExportPlugin({
overlay: false
})
]
});
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'
});
}
});
t.windowResized(() => {
t.resizeCanvas(window.innerWidth, window.innerHeight);
});Next steps
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.
Acknowledgements
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.