Welcome to TiddlyWiki, a non-linear personal web notebook that anyone can use and keep forever, independently of any corporation.TiddlyWiki is a complete interactive wiki in JavaScript. It can be used as a single HTML file in the browser or as a powerful Node.js application. It is highly customisable: the entire user interface is itself implemented in hackable WikiText.
Pull request previews courtesy of Netlify[](https://www.netlify.com)
Join the Community
User forums
Talk TiddlyWiki
As the official TiddlyWiki forum, Talk TiddlyWiki is a place to talk about TiddlyWiki: requests for help, announcements of new releases and plugins, debating new features, or just sharing experiences. You can participate via the associated website, or subscribe via email.https://talk.tiddlywiki.org/
Google Groups
For the convenience of existing users, we also continue to operate the original TiddlyWiki group (hosted on Google Groups since 2005): https://groups.google.com/group/TiddlyWiki
TiddlyWiki is a SingleFileApplication, which is easy to use. For advanced users and developers there is a possibility to use a Node.js client / server configuration. This configuration is also used to build the TiddlyWiki SinglePageApplication
Linux: *Debian/Ubuntu*:`apt install nodejs`May need to be followed up by:`apt install npm`*Arch Linux*`yay -S tiddlywiki` (installs node and tiddlywiki)
Open a command line terminal and type:`npm install tiddlywiki`If it fails with an error you may need to re-run the command as an administrator:`sudo npm install tiddlywiki` (Mac/Linux)
Ensure TiddlyWiki is installed by typing:`tiddlywiki --version`
In response, you should see TiddlyWiki report its current version (eg "5.4.1". You may also see other debugging information reported.)
Try it out:
`tiddlywiki mynewwiki --init server` to create a folder for a new wiki that includes server-related components
`tiddlywiki mynewwiki --listen` to start TiddlyWiki
click the **save changes** button in the sidebar, **OR**
`tiddlywiki mynewwiki --build index`
The `-g` flag causes TiddlyWiki to be installed globally. Without it, TiddlyWiki will only be available in the directory where you installed it.**Warning**If you are using Debian or Debian-based Linux and you are receiving a `node: command not found` error though node.js package is installed, you may need to create a symbolic link between `nodejs` and `node`. Consult your distro's manual and `whereis` to correctly create a link. See github issue 1434. Example Debian v8.0: `sudo ln -s /usr/bin/nodejs /usr/bin/node`
**Tip**You can also install prior versions like this: ` npm install tiddlywiki@5.1.13`
Using TiddlyWiki on Node.js
TiddlyWiki5 includes a set of commands for use on the command line to perform an extensive set of operations based on TiddlyWikiFolders, TiddlerFiles.For example, the following command loads the tiddlers from a TiddlyWiki HTML file and then saves one of them in static HTML:`tiddlywiki --verbose --load mywiki.html --render ReadMe ./readme.html`Running `tiddlywiki` from the command line boots the TiddlyWiki kernel, loads the core plugins and establishes an empty wiki store. It then sequentially processes the command line arguments from left to right. The arguments are separated with spaces.Introduced in v5.1.20 First, there can be zero or more plugin references identified by the prefix `+` for plugin names or `++` for a path to a plugin folder. These plugins are loaded in addition to any specified in the TiddlyWikiFolder.The next argument is the optional path to the TiddlyWikiFolder to be loaded. If not present, then the current directory is used.The commands and their individual arguments follow, each command being identified by the prefix `--`.`tiddlywiki [+<pluginname> | ++<pluginpath>] [<wikipath>] [--<command> [<arg>[,<arg>]]]`For example:tiddlywiki --version
tiddlywiki +plugins/tiddlywiki/filesystem +plugins/tiddlywiki/tiddlyweb mywiki --listen
tiddlywiki ++./mygreatplugin mywiki --listenIntroduced in v5.1.18 Commands such as the ListenCommand that support large numbers of parameters can use NamedCommandParameters to make things less unwieldy. For example:`tiddlywiki wikipath --listen username=jeremy port=8090`See Commands for a full listing of the available commands.
Upgrading TiddlyWiki on Node.js
If you've installed TiddlyWiki on Node.js on the usual way, when a new version is released you can upgrade it with this command:`npm update -g tiddlywiki`On Mac or Linux you'll need to add **sudo** like this:`sudo npm update -g tiddlywiki`
*This readme file was automatically generated by TiddlyWiki*
---
## File: bin/readme.md
Script Files
The TiddlyWiki5 repository contains several scripts in the `bin` folder that you can use to automate common tasks, or as a useful starting point for your own scripts. See Scripts for building tiddlywiki.com for details of the scripts used to build and release https://tiddlywiki.com/.All the scripts expect to be run from the root folder of the repository.
`serve`: serves tw5.com
./bin/serve.sh -h
./bin/serve.sh [edition dir] [username] [password] [host] [port]Or:./bin/serve.cmd -h
./bin/serve.cmd [edition dir] [username] [password] [host] [port]This script starts TiddlyWiki5 running as an HTTP server, defaulting to the content from the `tw5.com-server` edition. By default, the Node.js serves on port 8080. If the optional `username` parameter is provided, it is used for signing edits. If the `password` is provided then HTTP basic authentication is used. Run the script with the `-h` parameter to see online help.To experiment with this configuration, run the script and then visit `http://127.0.0.1:8080` in a browser.Changes made in the browser propagate to the server over HTTP (use the browser developer console to see these requests). The server then syncs changes to the file system (and logs each change to the screen).
`test`: build and run tests
This script runs the `test` edition of TiddlyWiki on the server to perform the server-side tests and to build `test.html` for running the tests in the browser.
`lazy`: serves tw5.com with lazily loaded images
`./bin/lazy.sh <username> [<password>]`Or:`./bin/lazy.cmd <username> [<password>]`This script serves the `tw5.com-server` edition content with LazyLoading applied to images.
---
## File: core/modules/utils/diff-match-patch/README.md
The Diff Match and Patch libraries offer robust algorithms to perform the
operations required for synchronizing plain text.
1. Diff:
* Compare two blocks of plain text and efficiently return a list of differences.
* [Diff Demo](https://neil.fraser.name/software/diff_match_patch/demos/diff.html)
2. Match:
* Given a search string, find its best fuzzy match in a block of plain text. Weighted for both accuracy and location.
* [Match Demo](https://neil.fraser.name/software/diff_match_patch/demos/match.html)
3. Patch:
* Apply a list of patches onto plain text. Use best-effort to apply patch even when the underlying text doesn't match.
* [Patch Demo](https://neil.fraser.name/software/diff_match_patch/demos/patch.html)
Originally built in 2006 to power Google Docs, this library is now available in C++, C#, Dart, Java, JavaScript, Lua, Objective C, and Python.
### Reference
* [API](https://github.com/google/diff-match-patch/wiki/API) - Common API across all languages.
* [Line or Word Diffs](https://github.com/google/diff-match-patch/wiki/Line-or-Word-Diffs) - Less detailed diffs.
* [Plain Text vs. Structured Content](https://github.com/google/diff-match-patch/wiki/Plain-Text-vs.-Structured-Content) - How to deal with data like XML.
* [Unidiff](https://github.com/google/diff-match-patch/wiki/Unidiff) - The patch serialization format.
* [Support](https://groups.google.com/forum/#!forum/diff-match-patch) - Newsgroup for developers.
### Languages
Although each language port of Diff Match Patch uses the same API, there are some language-specific notes.
* [C++](https://github.com/google/diff-match-patch/wiki/Language:-Cpp)
* [C#](https://github.com/google/diff-match-patch/wiki/Language:-C%23)
* [Dart](https://github.com/google/diff-match-patch/wiki/Language:-Dart)
* [Java](https://github.com/google/diff-match-patch/wiki/Language:-Java)
* [JavaScript](https://github.com/google/diff-match-patch/wiki/Language:-JavaScript)
* [Lua](https://github.com/google/diff-match-patch/wiki/Language:-Lua)
* [Objective-C](https://github.com/google/diff-match-patch/wiki/Language:-Objective-C)
* [Python](https://github.com/google/diff-match-patch/wiki/Language:-Python)
A standardized speed test tracks the [relative performance of diffs](https://docs.google.com/spreadsheets/d/1zpZccuBpjMZTvL1nGDMKJc7rWL_m_drF4XKOJvB27Kc/edit#gid=0) in each language.
### Algorithms
This library implements [Myer's diff algorithm](https://neil.fraser.name/writing/diff/myers.pdf) which is generally considered to be the best general-purpose diff. A layer of [pre-diff speedups and post-diff cleanups](https://neil.fraser.name/writing/diff/) surround the diff algorithm, improving both performance and output quality.
This library also implements a [Bitap matching algorithm](https://neil.fraser.name/writing/patch/bitap.ps) at the heart of a [flexible matching and patching strategy](https://neil.fraser.name/writing/patch/).
---
## File: languages/pl-PL/readme.md
Translation notes are available here: https://github.com/TiddlyWiki/TiddlyWiki5/discussions/6080
---
## File: plugins/tiddlywiki/xmldom/files/readme.md
# XMLDOM [](http://travis-ci.org/bigeasy/xmldom) [](https://coveralls.io/r/bigeasy/xmldom) [](http://badge.fury.io/js/xmldom)
A JavaScript implementation of W3C DOM for Node.js, Rhino and the browser. Fully
compatible with `W3C DOM level2`; and some compatible with `level3`. Supports
`DOMParser` and `XMLSerializer` interface such as in browser.
Install:
-------
>npm install xmldom
Example:
====
```javascript
var DOMParser = require('xmldom').DOMParser;
var doc = new DOMParser().parseFromString(
'\n'+
'\ttest\n'+
'\t\n'+
'\t\n'+
''
,'text/xml');
doc.documentElement.setAttribute('x','y');
doc.documentElement.setAttributeNS('./lite','c:x','y2');
var nsAttr = doc.documentElement.getAttributeNS('./lite','x')
console.info(nsAttr)
console.info(doc)
```
API Reference
=====
* [DOMParser](https://developer.mozilla.org/en/DOMParser):
```javascript
parseFromString(xmlsource,mimeType)
```
* **options extension** _by xmldom_(not BOM standard!!)
```javascript
//added the options argument
new DOMParser(options)
//errorHandler is supported
new DOMParser({
/**
* locator is always need for error position info
*/
locator:{},
/**
* you can override the errorHandler for xml parser
* @link http://www.saxproject.org/apidoc/org/xml/sax/ErrorHandler.html
*/
errorHandler:{warning:function(w){console.warn(w)},error:callback,fatalError:callback}
//only callback model
//errorHandler:function(level,msg){console.log(level,msg)}
})
```
* [XMLSerializer](https://developer.mozilla.org/en/XMLSerializer)
```javascript
serializeToString(node)
```
DOM level2 method and attribute:
------
* [Node](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247)
attribute:
nodeValue|prefix
readonly attribute:
nodeName|nodeType|parentNode|childNodes|firstChild|lastChild|previousSibling|nextSibling|attributes|ownerDocument|namespaceURI|localName
method:
insertBefore(newChild, refChild)
replaceChild(newChild, oldChild)
removeChild(oldChild)
appendChild(newChild)
hasChildNodes()
cloneNode(deep)
normalize()
isSupported(feature, version)
hasAttributes()
* [DOMImplementation](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-102161490)
method:
hasFeature(feature, version)
createDocumentType(qualifiedName, publicId, systemId)
createDocument(namespaceURI, qualifiedName, doctype)
* [Document](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#i-Document) : Node
readonly attribute:
doctype|implementation|documentElement
method:
createElement(tagName)
createDocumentFragment()
createTextNode(data)
createComment(data)
createCDATASection(data)
createProcessingInstruction(target, data)
createAttribute(name)
createEntityReference(name)
getElementsByTagName(tagname)
importNode(importedNode, deep)
createElementNS(namespaceURI, qualifiedName)
createAttributeNS(namespaceURI, qualifiedName)
getElementsByTagNameNS(namespaceURI, localName)
getElementById(elementId)
* [DocumentFragment](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-B63ED1A3) : Node
* [Element](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-745549614) : Node
readonly attribute:
tagName
method:
getAttribute(name)
setAttribute(name, value)
removeAttribute(name)
getAttributeNode(name)
setAttributeNode(newAttr)
removeAttributeNode(oldAttr)
getElementsByTagName(name)
getAttributeNS(namespaceURI, localName)
setAttributeNS(namespaceURI, qualifiedName, value)
removeAttributeNS(namespaceURI, localName)
getAttributeNodeNS(namespaceURI, localName)
setAttributeNodeNS(newAttr)
getElementsByTagNameNS(namespaceURI, localName)
hasAttribute(name)
hasAttributeNS(namespaceURI, localName)
* [Attr](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-637646024) : Node
attribute:
value
readonly attribute:
name|specified|ownerElement
* [NodeList](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-536297177)
readonly attribute:
length
method:
item(index)
* [NamedNodeMap](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1780488922)
readonly attribute:
length
method:
getNamedItem(name)
setNamedItem(arg)
removeNamedItem(name)
item(index)
getNamedItemNS(namespaceURI, localName)
setNamedItemNS(arg)
removeNamedItemNS(namespaceURI, localName)
* [CharacterData](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-FF21A306) : Node
method:
substringData(offset, count)
appendData(arg)
insertData(offset, arg)
deleteData(offset, count)
replaceData(offset, count, arg)
* [Text](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1312295772) : CharacterData
method:
splitText(offset)
* [CDATASection](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-667469212)
* [Comment](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1728279322) : CharacterData
* [DocumentType](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-412266927)
readonly attribute:
name|entities|notations|publicId|systemId|internalSubset
* Notation : Node
readonly attribute:
publicId|systemId
* Entity : Node
readonly attribute:
publicId|systemId|notationName
* EntityReference : Node
* ProcessingInstruction : Node
attribute:
data
readonly attribute:
target
DOM level 3 support:
-----
* [Node](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-textContent)
attribute:
textContent
method:
isDefaultNamespace(namespaceURI){
lookupNamespaceURI(prefix)
DOM extension by xmldom
---
* [Node] Source position extension;
attribute:
//Numbered starting from '1'
lineNumber
//Numbered starting from '1'
columnNumber
---
## File: plugins/tiddlywiki/sax/files/README.md
# sax js
A sax-style parser for XML and HTML.
Designed with [node](http://nodejs.org/) in mind, but should work fine in
the browser or other CommonJS implementations.
## What This Is
* A very simple tool to parse through an XML string.
* A stepping stone to a streaming HTML parser.
* A handy way to deal with RSS and other mostly-ok-but-kinda-broken XML
docs.
## What This Is (probably) Not
* An HTML Parser - That's a fine goal, but this isn't it. It's just
XML.
* A DOM Builder - You can use it to build an object model out of XML,
but it doesn't do that out of the box.
* XSLT - No DOM = no querying.
* 100% Compliant with (some other SAX implementation) - Most SAX
implementations are in Java and do a lot more than this does.
* An XML Validator - It does a little validation when in strict mode, but
not much.
* A Schema-Aware XSD Thing - Schemas are an exercise in fetishistic
masochism.
* A DTD-aware Thing - Fetching DTDs is a much bigger job.
## Regarding `Hello, world!').close();
// stream usage
// takes the same options as the parser
var saxStream = require("sax").createStream(strict, options)
saxStream.on("error", function (e) {
// unhandled errors will throw, since this is a proper node
// event emitter.
console.error("error!", e)
// clear the error
this._parser.error = null
this._parser.resume()
})
saxStream.on("opentag", function (node) {
// same object as above
})
// pipe is supported, and it's readable/writable
// same chunks coming in also go out.
fs.createReadStream("file.xml")
.pipe(saxStream)
.pipe(fs.createWriteStream("file-copy.xml"))
```
## Arguments
Pass the following arguments to the parser function. All are optional.
`strict` - Boolean. Whether or not to be a jerk. Default: `false`.
`opt` - Object bag of settings regarding string formatting. All default to `false`.
Settings supported:
* `trim` - Boolean. Whether or not to trim text and comment nodes.
* `normalize` - Boolean. If true, then turn any whitespace into a single
space.
* `lowercase` - Boolean. If true, then lowercase tag names and attribute names
in loose mode, rather than uppercasing them.
* `xmlns` - Boolean. If true, then namespaces are supported.
* `position` - Boolean. If false, then don't track line/col/position.
* `strictEntities` - Boolean. If true, only parse [predefined XML
entities](http://www.w3.org/TR/REC-xml/#sec-predefined-ent)
(`&`, `'`, `>`, `<`, and `"`)
## Methods
`write` - Write bytes onto the stream. You don't have to do this all at
once. You can keep writing as much as you want.
`close` - Close the stream. Once closed, no more data may be written until
it is done processing the buffer, which is signaled by the `end` event.
`resume` - To gracefully handle errors, assign a listener to the `error`
event. Then, when the error is taken care of, you can call `resume` to
continue parsing. Otherwise, the parser will not continue while in an error
state.
## Members
At all times, the parser object will have the following members:
`line`, `column`, `position` - Indications of the position in the XML
document where the parser currently is looking.
`startTagPosition` - Indicates the position where the current tag starts.
`closed` - Boolean indicating whether or not the parser can be written to.
If it's `true`, then wait for the `ready` event to write again.
`strict` - Boolean indicating whether or not the parser is a jerk.
`opt` - Any options passed into the constructor.
`tag` - The current tag being dealt with.
And a bunch of other stuff that you probably shouldn't touch.
## Events
All events emit with a single argument. To listen to an event, assign a
function to `on`. Functions get executed in the this-context of
the parser object. The list of supported events are also in the exported
`EVENTS` array.
When using the stream interface, assign handlers using the EventEmitter
`on` function in the normal fashion.
`error` - Indication that something bad happened. The error will be hanging
out on `parser.error`, and must be deleted before parsing can continue. By
listening to this event, you can keep an eye on that kind of stuff. Note:
this happens *much* more in strict mode. Argument: instance of `Error`.
`text` - Text node. Argument: string of text.
`doctype` - The ``. Argument:
object with `name` and `body` members. Attributes are not parsed, as
processing instructions have implementation dependent semantics.
`sgmldeclaration` - Random SGML declarations. Stuff like ``
would trigger this kind of event. This is a weird thing to support, so it
might go away at some point. SAX isn't intended to be used to parse SGML,
after all.
`opentagstart` - Emitted immediately when the tag name is available,
but before any attributes are encountered. Argument: object with a
`name` field and an empty `attributes` set. Note that this is the
same object that will later be emitted in the `opentag` event.
`opentag` - An opening tag. Argument: object with `name` and `attributes`.
In non-strict mode, tag names are uppercased, unless the `lowercase`
option is set. If the `xmlns` option is set, then it will contain
namespace binding information on the `ns` member, and will have a
`local`, `prefix`, and `uri` member.
`closetag` - A closing tag. In loose mode, tags are auto-closed if their
parent closes. In strict mode, well-formedness is enforced. Note that
self-closing tags will have `closeTag` emitted immediately after `openTag`.
Argument: tag name.
`attribute` - An attribute node. Argument: object with `name` and `value`.
In non-strict mode, attribute names are uppercased, unless the `lowercase`
option is set. If the `xmlns` option is set, it will also contains namespace
information.
`comment` - A comment node. Argument: the string of the comment.
`opencdata` - The opening tag of a ``) of a `` tags trigger a `"script"`
event, and their contents are not checked for special xml characters.
If you pass `noscript: true`, then this behavior is suppressed.
## Reporting Problems
It's best to write a failing test if you find an issue. I will always
accept pull requests with failing tests if they demonstrate intended
behavior, but it is very hard to figure out what issue you're describing
without a test. Writing a test is also the best way for you yourself
to figure out if you really understand the issue you think you have with
sax-js.
---
## File: plugins/tiddlywiki/qrcode/files/qrcode/README.md
# node-yaqrcode
Yet another node-qrcode Generator!
This is a simple and pure javascript wrapper for the QR Code Generator from the d-project.
No Canvas or Binary needed!
Note:
```
The word 'QR Code' is registered trademark of
DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
```
## Overview
- Pure Javascript and could work without any requiments
- Use `RS_BLOCK_TABLE` from http://davidshimjs.github.io/qrcodejs/ to support typeNumber 40
- Use the code from http://davidshimjs.github.io/qrcodejs/ to support UTF-8
- Return a Base64 Data URI like this
```
/* Detailed source-code truncated for AI context efficiency. */
```
## Usage
```
npm install yaqrcode
```
```javascript
qrcode = require('yaqrcode');
base64 = qrcode('hello world');
```
### custom size
```javascript
qrcode = require('yaqrcode');
base64 = qrcode('hello world', {
size: 500
});
```
## License
The MIT License (MIT)
Copyright (c) 2013,2015 Zeno Zeng
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
---
## File: plugins/tiddlywiki/qrcode/files/html5-qrcode/README.md
# Html5-QRCode
## Lightweight & cross platform QR Code and Bar code scanning library for the web
Use this lightweight library to easily / quickly integrate QR code, bar code, and other common code scanning capabilities to your web application.
## Key highlights
- 🔲 Support scanning [different types of bar codes and QR codes](#supported-code-formats).
- 🖥 Supports [different platforms](#supported-platforms) be it Android, IOS, MacOs, Windows or Linux
- 🌐 Supports [different browsers](#supported-platforms) like Chrome, Firefox, Safari, Edge, Opera ...
- 📷 Supports scanning with camera as well as local files
- ➡️ Comes with an [end to end library with UI](#easy-mode---with-end-to-end-scanner-user-interface) as well as a [low level library to build your own UI with](#pro-mode---if-you-want-to-implement-your-own-user-interface).
- 🔦 Supports customisations like [flash/torch support](#showtorchbuttonifsupported---boolean--undefined), zooming etc.
Supports two kinds of APIs
- `Html5QrcodeScanner` — End-to-end scanner with UI, integrate with less than ten lines of code.
- `Html5Qrcode` — Powerful set of APIs you can use to build your UI without worrying about camera setup, handling permissions, reading codes, etc.
> Support for scanning local files on the device is a new addition and helpful for the web browser which does not support inline web-camera access in smartphones. **Note:** This doesn't upload files to any server — everything is done locally.
[](https://dl.circleci.com/status-badge/redirect/gh/mebjas/html5-qrcode/tree/master) [](https://github.com/mebjas/html5-qrcode/issues) [](https://github.com/mebjas/html5-qrcode/releases) [](https://www.codacy.com/gh/mebjas/html5-qrcode/dashboard?utm_source=github.com&utm_medium=referral&utm_content=mebjas/html5-qrcode&utm_campaign=Badge_Grade) [](https://gitter.im/html5-qrcode/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[](https://www.npmjs.com/package/html5-qrcode) [](https://bit.ly/3CZiASv)
| | |
| -- | -- |
| _Demo at [scanapp.org](https://scanapp.org)_ | _Demo at [qrcode.minhazav.dev](https://qrcode.minhazav.dev) - **Scanning different types of codes**_ |
## We need your help!
Help incentivise feature development, bug fixing by supporting the sponsorhip goals of this project. See [list of sponsered feature requests here](https://github.com/mebjas/html5-qrcode/wiki/Feature-request-sponsorship-goals#feature-requests).
[](https://ko-fi.com/L3L84G0C8)
## Documentation
The documentation for this project has been moved to [scanapp.org/html5-qrcode-docs](https://scanapp.org/html5-qrcode-docs/).
- [Getting started](https://scanapp.org/html5-qrcode-docs/docs/intro)
- [Supported frameworks](https://scanapp.org/html5-qrcode-docs/docs/supported_frameworks)
- [Supported 1D and 2D Code formats](https://scanapp.org/html5-qrcode-docs/docs/supported_code_formats)
- [Detailed API documentation](https://scanapp.org/html5-qrcode-docs/docs/apis)
## Supported platforms
We are working continuously on adding support for more and more platforms. If you find a platform or a browser where the library is not working, please feel free to file an issue. Check the [demo link](https://blog.minhazav.dev/research/html5-qrcode.html) to test it out.
**Legends**
- Means full support — inline webcam and file based
- Means partial support — only file based, webcam in progress
### PC / Mac
| Firefox | Chrome | Safari | Opera | Edge
| --------- | --------- | --------- | --------- | ------- |
|| | | |
### Android
| Chrome | Firefox | Edge | Opera | Opera Mini | UC
| --------- | --------- | --------- | --------- | --------- | --------- |
|| | | | |
### IOS
| Safari | Chrome | Firefox | Edge
| --------- | --------- | --------- | --------- |
|| * | * |
> \* Supported for IOS versions >= 15.1
>
> Before version 15.1, Webkit for IOS is used by Chrome, Firefox, and other browsers in IOS and they do not have webcam permissions yet. There is an ongoing issue on fixing the support for iOS - [issue/14](https://github.com/mebjas/html5-qrcode/issues/14)
### Framework support
The library can be easily used with several other frameworks, I have been adding examples for a few of them and would continue to add more.
|| | | |
| -------- | -------- | -------- | -------- | -------- |
| [Html5](./examples/html5) | [VueJs](./examples/vuejs) | [ElectronJs](./examples/electron) | [React](https://github.com/scanapp-org/html5-qrcode-react) | [Lit](./examples/lit)
### Supported Code formats
Code scanning is dependent on [Zxing-js](https://github.com/zxing-js/library) library. We will be working on top of it to add support for more types of code scanning. If you feel a certain type of code would be helpful to have, please file a feature request.
| Code | Example |
| ---- | ----- |
| QR Code | |
| AZTEC | |
| CODE_39| |
| CODE_93| |
| CODE_128| |
| ITF| |
| EAN_13| |
| EAN_8| |
| PDF_417| |
| UPC_A| |
| UPC_E| |
| DATA_MATRIX| |
| MAXICODE*| |
| RSS_14*| |
| RSS_EXPANDED*| |
> *Formats are not supported by our experimental integration with native
> BarcodeDetector API integration ([Read more](/experimental.md)).
## Description - [View Demo](https://blog.minhazav.dev/research/html5-qrcode.html)
> See an end to end scanner experience at [scanapp.org](https://scanapp.org).
This is a cross-platform JavaScript library to integrate QR code, bar codes & a few other types of code scanning capabilities to your applications running on HTML5 compatible browser.
Supports:
- Querying camera on the device (with user permissions)
- Rendering live camera feed, with easy to use user interface for scanning
- Supports scanning a different kind of QR codes, bar codes and other formats
- Supports selecting image files from the device for scanning codes
## How to use
Find detailed guidelines on how to use this library on [scanapp.org/html5-qrcode-docs](https://scanapp.org/html5-qrcode-docs/docs/intro).
## Demo
_Scan this image or visit [blog.minhazav.dev/research/html5-qrcode.html](https://blog.minhazav.dev/research/html5-qrcode.html)_
### For more information
Check these articles on how to use this library:
- [QR and barcode scanner using HTML and JavaScript](https://minhazav.medium.com/qr-and-barcode-scanner-using-html-and-javascript-2cdc937f793d)
- [HTML5 QR Code scanning — launched v1.0.1 without jQuery dependency and refactored Promise based APIs](https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/).
- [HTML5 QR Code scanning with JavaScript — Support for scanning the local file and using default camera added (v1.0.5)](https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/)
## Screenshots
_Figure: Screenshot from Google Chrome running on MacBook Pro_
## Documentation
Find the full API documentation at [scanapp.org/html5-qrcode-docs/docs/apis](https://scanapp.org/html5-qrcode-docs/docs/apis).
### Extra optional `configuration` in `start()` method
Configuration object that can be used to configure both the scanning behavior and the user interface (UI). Most of the fields have default properties that will be used unless a different value is provided. If you do not want to override anything, you can just pass in an empty object `{}`.
#### `fps` — Integer, Example = 10
A.K.A frame per second, the default value for this is 2, but it can be increased to get faster scanning. Increasing too high value could affect performance. Value `>1000` will simply fail.
#### `qrbox` — `QrDimensions` or `QrDimensionFunction` (Optional), Example = `{ width: 250, height: 250 }`
Use this property to limit the region of the viewfinder you want to use for scanning. The rest of the viewfinder would be shaded. For example, by passing config `{ qrbox : { width: 250, height: 250 } }`, the screen will look like:
This can be used to set a rectangular scanning area with config like:
```js
let config = { qrbox : { width: 400, height: 150 } }
```
This config also accepts a function of type
```ts
/**
* A function that takes in the width and height of the video stream
* and returns QrDimensions.
*
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
(viewfinderWidth: number, viewfinderHeight: number) => QrDimensions;
```
This allows you to set dynamic QR box dimensions based on the video dimensions. See this blog article for example: [Setting dynamic QR box size in Html5-qrcode - ScanApp blog](https://scanapp.org/blog/2022/01/09/setting-dynamic-qr-box-size-in-html5-qrcode.html)
> This might be desirable for bar code scanning.
If this value is not set, no shaded QR box will be rendered and the scanner will scan the entire area of video stream.
#### `aspectRatio` — Float, Example 1.777778 for 16:9 aspect ratio
Use this property to render the video feed in a certain aspect ratio. Passing a nonstandard aspect ratio like `100000:1` could lead to the video feed not even showing up. Ideal values can be:
| Value | Aspect Ratio | Use Case |
| ----- | ------------ | -------- |
|1.333334 | 4:3 | Standard camera aspect ratio |
|1.777778 | 16:9 | Full screen, cinematic |
|1.0 | 1:1 | Square view |
If you do not pass any value, the whole viewfinder would be used for scanning.
**Note**: this value has to be smaller than the width and height of the `QR code HTML element`.
#### `disableFlip` — Boolean (Optional), default = false
By default, the scanner can scan for horizontally flipped QR Codes. This also enables scanning QR code using the front camera on mobile devices which are sometimes mirrored. This is `false` by default and I recommend changing this only if:
- You are sure that the camera feed cannot be mirrored (Horizontally flipped)
- You are facing performance issues with this enabled.
Here's an example of a normal and mirrored QR Code
| Normal QR Code | Mirrored QR Code |
| ----- | ---- |
| | |
#### `rememberLastUsedCamera` — Boolean (Optional), default = true
If `true` the last camera used by the user and weather or not permission was granted would be remembered in the local storage. If the user has previously granted permissions — the request permission option in the UI will be skipped and the last selected camera would be launched automatically for scanning.
If `true` the library shall remember if the camera permissions were previously
granted and what camera was last used. If the permissions is already granted for
"camera", QR code scanning will automatically * start for previously used camera.
#### `supportedScanTypes` - `Array | []`
> This is only supported for `Html5QrcodeScanner`.
Default = `[Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]`
This field can be used to:
- Limit support to either of `Camera` or `File` based scan.
- Change default scan type.
How to use:
```js
function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`, decodedResult);
}
let config = {
fps: 10,
qrbox: {width: 100, height: 100},
rememberLastUsedCamera: true,
// Only support camera scan type.
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA]
};
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader", config, /* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess);
```
For file based scan only choose:
```js
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
```
For supporting both as it is today, you can ignore this field or set as:
```js
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE]
```
To set the file based scan as defult change the order:
```js
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA]
```
#### `showTorchButtonIfSupported` - `boolean | undefined`
> This is only supported for `Html5QrcodeScanner`.
If `true` the rendered UI will have button to turn flash on or off based on device + browser support. The value is `false` by default.
### Scanning only specific formats
By default, both camera stream and image files are scanned against all the
supported code formats. Both `Html5QrcodeScanner` and `Html5Qrcode` classes can
be configured to only support a subset of supported formats. Supported formats
are defined in
[enum Html5QrcodeSupportedFormats](https://github.com/mebjas/html5-qrcode/blob/master/src/core.ts#L14).
```ts
enum Html5QrcodeSupportedFormats {
QR_CODE = 0,
AZTEC,
CODABAR,
CODE_39,
CODE_93,
CODE_128,
DATA_MATRIX,
MAXICODE,
ITF,
EAN_13,
EAN_8,
PDF_417,
RSS_14,
RSS_EXPANDED,
UPC_A,
UPC_E,
UPC_EAN_EXTENSION,
}
```
I recommend using this only if you need to explicitly omit support for certain
formats or want to reduce the number of scans done per second for performance
reasons.
#### Scanning only QR code with `Html5Qrcode`
```js
const html5QrCode = new Html5Qrcode(
"reader", { formatsToSupport: [ Html5QrcodeSupportedFormats.QR_CODE ] });
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/* handle success */
};
const config = { fps: 10, qrbox: { width: 250, height: 250 } };
// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);
```
#### Scanning only QR code and UPC codes with `Html5QrcodeScanner`
```js
function onScanSuccess(decodedText, decodedResult) {
// Handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`, decodedResult);
}
const formatsToSupport = [
Html5QrcodeSupportedFormats.QR_CODE,
Html5QrcodeSupportedFormats.UPC_A,
Html5QrcodeSupportedFormats.UPC_E,
Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION,
];
const html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{
fps: 10,
qrbox: { width: 250, height: 250 },
formatsToSupport: formatsToSupport
},
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess);
```
## Experimental features
The library now supports some experimental features which are supported in the
library but not recommended for production usage either due to limited testing
done or limited compatibility for underlying APIs used. Read more about it [here](/experimental.md).
Some experimental features include:
- [Support for BarcodeDetector JavaScript API](/experimental.md)
## How to modify and build
1. Code changes should only be made to [/src](./src) only.
2. Run `npm install` to install all dependencies.
3. Run `npm run-script build` to build JavaScript output. The output JavaScript distribution is built to [/dist/html5-qrcode.min.js](./dist/html5-qrcode.min.js). If you are developing on Windows OS, run `npm run-script build-windows`.
4. Testing
- Run `npm test`
- Run the tests before sending a pull request, all tests should run.
- Please add tests for new behaviors sent in PR.
5. Send a pull request
- Include code changes only to `./src`. **Do not change `./dist` manually.**
- In the pull request add a comment like
```text
@all-contributors please add @mebjas for this new feature or tests
```
- For calling out your contributions, the bot will update the contributions file.
- Code will be built & published by the author in batches.
## How to contribute
You can contribute to the project in several ways:
- File issue ticket for any observed bug or compatibility issue with the project.
- File feature request for missing features.
- Take open bugs or feature request and work on it and send a Pull Request.
- Write unit tests for existing codebase (which is not covered by tests today). **Help wanted on this** - [read more](./tests).
## Support 💖
This project would not be possible without all of our fantastic contributors and [sponsors](https://github.com/sponsors/mebjas). If you'd like to support the maintenance and upkeep of this project you can [donate via GitHub Sponsors](https://github.com/sponsors/mebjas).
**Sponsor the project for priortising feature requests / bugs relevant to you**. (Depends on scope of ask and bandwidth of the contributors).
[](https://github.com/webauthor)
[](https://github.com/ben-gy)
[](https://github.com/bujjivadu)
Help incentivise feature development, bug fixing by supporting the sponsorhip goals of this project. See [list of sponsered feature requests here](https://github.com/mebjas/html5-qrcode/wiki/Feature-request-sponsorship-goals#feature-requests).
Also, huge thanks to following organizations for non monitery sponsorships
[](https://scanapp.org)
[](https://www.browserstack.com)
## Credits
The decoder used for the QR code reading is from `Zxing-js` https://github.com/zxing-js/library
---
## File: plugins/tiddlywiki/bibtex/files/README.md
bibtexParseJs
=============
A JavaScript library that parses BibTeX parser. Forked from
[bibtex-parser](https://github.com/mikolalysenko/bibtex-parser).
## Using in Browser
Include bibtexParse.js and call
```
bibtexParse.toJSON('@article{sample1,title={sample title}}');
```
## Using in [Node.js](http://nodejs.org/)
Install ```npm install bibtex-parse-js```
```
var bibtexParse = require('bibtex-parse-js');
var sample = bibtexParse.toJSON('@article{sample1,title={sample title}}');
console.log(sample);
```
**Returns** A parsed bibtex file as a JSON Array Object
```
[ { citationKey: 'SAMPLE1',
entryType: 'ARTICLE',
entryTags: { TITLE: 'sample title' } } ]
```
## Contributing
Contributions are welcome. Please make sure the unit test(test/runTest.js) reflects the
changes and completes successfully.
#### Travis CI
See the latest build and results at [https://travis-ci.org/ORCID/bibtexParseJs](https://travis-ci.org/ORCID/bibtexParseJs)
## Credits
(c) 2010 Henrik Muehe. MIT License
[visit](https://code.google.com/p/bibtex-js/)
CommonJS port maintained by Mikola Lysenko
[visit](https://github.com/mikolalysenko/bibtex-parser)