There are multiple options for installing flipnote.js, depending on your use-case and familiarity with JavaScript. Once you've installed the library, check out the Recipes page for some quick usage tips.
This is the simplest way to embed the library in your web project, since you don't have to host the script yourself and you will automatically recieve updates until the next major version. Just drop the following snippet into the <head></head> of your page's HTML:
<script src="https://cdn.jsdelivr.net/npm/flipnote.js@5"></script>
When including the library this way, all of the global exports will be available on window.flipnote.
You can also download the latest version of the library and self-host it on your own server if you prefer. You will have to manage updates yourself this way, but it's more secure.
Development version
Uncompressed, with source comments included. Intended for debugging.
Production version
Minified and optimized version.
When including the library this way, all of the global exports will be available on window.flipnote.
Flipnote.js is also available as a package on NPM. For this, you'll need a NodeJS environment set up and access to a command line.
To use this method on the web, you should run your code through a bundler like Parcel, Rollup, or Webpack.
You can import the library the old require() way:
const flipnote = require('flipnote.js');
Or via ES6 imports if they are supported in your environment:
import flipnote from 'flipnote.js';
When using the library this way, all of the global exports will be available as the default import.
Flipnote.js exports comprehensive type definitions for Typescript, which will be included automatically when you import the library from NPM.
Using Typescript isn't necessary, but it is highly recommended if you are using flipnote.js for any critical infrastructure such as Flipnote conversion services, since it will help you catch type errors at compile time rather than when your code is running.
In some cases, you may want to use types separately from the core library. For example, if you wanted to only import the Flipnote and FlipnoteFormat types, you could do:
import { Flipnote, FlipnoteFormat } from 'flipnote.js';
// Then you can use these as Typescript types like:
const note: Flipnote;
// load a note...
if (note.format === FlipnoteFormat.KWZ) {
// only run this code if the note is a KWZ...
}
Flipnote.js exports the following interfaces globally:
For Typescript, it also exports the following types: