Skip to content

Latest commit

 

History

History

docs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
.nojekyll
.nojekyll
 
 
CNAME
CNAME
 
 
License.md
License.md
 
 
README.md
README.md
 
 
_navbar.md
_navbar.md
 
 
_sidebar.md
_sidebar.md
 
 
documentation.md
documentation.md
 
 
examples.md
examples.md
 
 
index.html
index.html
 
 

README.md

genanki-js

A JavaScript implementation for generating Anki decks in browser. This is fork of mkanki.

QuickStart

Download genanki zip file from release pages.

The zip file contains two folder

Alternatively, genanki.js can also be loaded from CDN.

<script src="https://cdn.jsdelivr.net/gh/krmanik/genanki-js/dist/genanki.js"></script>

Set Up a new project from scratch

1. Download genanki.js from dist folder and add to the project

<!-- for creating and exporting anki package file -->
<script src='genanki.js'></script>

2. Add sql.js, FileSaver.js and JSZip to the project

Note: mkanki uses better-sql, fs and archiver, that make it difficult to be used in browser

<!-- sqlite -->
<script src='js/sql/sql.js'></script>

<!-- File saver -->
<script src="js/filesaver/FileSaver.min.js"></script>

<!-- jszip for .apkg -->
<script src="js/jszip.min.js"></script>

3. Create a SQL global variable (may be added to index.js)

Note: The SQL variable is used in package.js#L20.

// The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
// We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
config = {
    locateFile: filename => `js/sql/sql-wasm.wasm`
}

var SQL;
initSqlJs(config).then(function (sql) {
    //Create the database
    SQL = sql;
});

4. After finishing above, the project structure should be like this

.
└── sample
    ├── js
    │   ├── anki
    │   │     └── genanki.js
    │   ├── filesaver
    │   │     ├── FileSaver.min.js
    │   │     └── FileSaver.min.js.map
    │   ├── sql
    │   │     ├── sql.js
    │   │     └── sql-wasm.wasm
    │   ├── jszip.min.js
    │   └── index.js
    └── index.html

5. Now use following Examples to generate and export decks.

View more examples here Examples

Examples
var m = new Model({
  name: "Basic (and reversed card)",
  id: "1543634829843",
  flds: [
    { name: "Front" },
    { name: "Back" }
  ],
  req: [
    [ 0, "all", [ 0 ] ],
    [ 1, "all", [ 1 ] ]
  ],
  tmpls: [
    {
      name: "Card 1",
      qfmt: "{{Front}}",
      afmt: "{{FrontSide}}\n\n<hr id=answer>\n\n{{Back}}",
    },
    {
      name: "Card 2",
      qfmt: "{{Back}}",
      afmt: "{{FrontSide}}\n\n<hr id=answer>\n\n{{Front}}",
    }
  ],
})
                        
var d = new Deck(1276438724672, "Test Deck")

d.addNote(m.note(['this is front', 'this is back']))

var p = new Package()
p.addDeck(d)

p.writeToFile('deck.apkg')

License

genanki-js

GNU Affero General Public License v3
Copyright (c) 2021 Mani

Other Third Party Licenses

License.md