diff --git a/examples/browser-wasm/.gitignore b/examples/browser-wasm/.gitignore
new file mode 100644
index 0000000..ee95eb9
--- /dev/null
+++ b/examples/browser-wasm/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+bundle.js
+sql-wasm.wasm
+yarn.lock
diff --git a/examples/browser-wasm/index.html b/examples/browser-wasm/index.html
new file mode 100644
index 0000000..6f514c4
--- /dev/null
+++ b/examples/browser-wasm/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ anki-apkg-export demo
+
+
+
+
+
+
+
+
+
diff --git a/examples/browser-wasm/index.js b/examples/browser-wasm/index.js
new file mode 100644
index 0000000..9bf62ac
--- /dev/null
+++ b/examples/browser-wasm/index.js
@@ -0,0 +1,59 @@
+import AnkiExport from 'anki-apkg-export';
+import { saveAs } from 'file-saver';
+import initSqlJs from 'sql.js';
+
+(async () => {
+ const sql = await initSqlJs();
+
+ document.querySelector('#buttonSimple').addEventListener('click', () => {
+ handleSimple(sql);
+ });
+
+ document.querySelector('#buttonAjax').addEventListener('click', () => {
+ handleAjax(sql);
+ });
+
+ document.querySelector('input').addEventListener('change', e => {
+ handleInput(sql, e.target.files[0]);
+ });
+})();
+
+async function handleSimple(sql) {
+ const apkg = new AnkiExport('deck-name', {}, sql);
+
+ apkg.addCard('card #1 front', 'card #1 back');
+ apkg.addCard('card #2 front', 'card #2 back');
+
+ const zip = await apkg.save();
+ saveAs(zip, 'output.apkg');
+}
+
+async function handleAjax(sql) {
+ const apkg = new AnkiExport('deck-name-ajax', {}, sql);
+
+ const response = await fetch('https://raw.githubusercontent.com/ewnd9/anki-apkg-export/39ebdd664ab23b5237eee95b7dd88c457e263a20/example/assets/anki.png');
+ const myBlob = await response.blob();
+
+ apkg.addMedia('anki.png', myBlob);
+ apkg.addCard('card #1 with image 
', 'card #1 back');
+
+ const zip = await apkg.save()
+ saveAs(zip, 'output.apkg');
+}
+
+async function handleInput(sql, file) {
+ const apkg = new AnkiExport('deck-name', {}, sql);
+ const reader = new FileReader();
+
+ reader.onload = async e => {
+ const file = e.target.result;
+
+ apkg.addMedia('anki.png', file);
+ apkg.addCard('card #1 with image ', 'card #1 back');
+
+ const zip = await apkg.save()
+ saveAs(zip, 'output.apkg');
+ };
+
+ reader.readAsArrayBuffer(file);
+}
diff --git a/examples/browser-wasm/package.json b/examples/browser-wasm/package.json
new file mode 100644
index 0000000..4c97eda
--- /dev/null
+++ b/examples/browser-wasm/package.json
@@ -0,0 +1,16 @@
+{
+ "private": true,
+ "scripts": {
+ "build": "webpack --mode production"
+ },
+ "dependencies": {
+ "anki-apkg-export": "file:../../",
+ "file-saver": "^2.0.2"
+ },
+ "devDependencies": {
+ "copy-webpack-plugin": "^5.1.1",
+ "script-loader": "^0.7.2",
+ "webpack": "^4.41.5",
+ "webpack-cli": "^3.3.10"
+ }
+}
diff --git a/examples/browser-wasm/webpack.config.js b/examples/browser-wasm/webpack.config.js
new file mode 100644
index 0000000..19b7295
--- /dev/null
+++ b/examples/browser-wasm/webpack.config.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+ entry: './index.js',
+ output: {
+ path: __dirname,
+ filename: 'bundle.js'
+ },
+ node: {
+ fs: 'empty'
+ },
+ plugins: [
+ new CopyPlugin([
+ { from: require.resolve('sql.js/dist/sql-wasm.wasm') },
+ ]),
+ ],
+};