diff --git a/.github/ISSUE_TEMPLATE/1-bug-report.yaml b/.github/ISSUE_TEMPLATE/1-bug-report.yaml
new file mode 100644
index 0000000..bca9ce7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1-bug-report.yaml
@@ -0,0 +1,160 @@
+name: Bug Report
+description: File a bug report / code-input lack of textarea functionality
+title: '[Bug] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+        
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for reporting bugs / behaviour inconsistent with a textarea.
+      description: Bugs are where code-input produces unexpected behaviour or perhaps logs errors in the console, plus when code-input does not act reasonably like a textarea element to your program. For functionality enhancement suggestions, please use the other issue templates.
+      options:
+        - label: I have encountered unexpected behaviour, or code-input is acting differently to a textarea.
+        required: true
+  - type: checkboxes
+    id: latest
+    attributes:
+      label: Please Check your code-input Version
+      description: We're constantly fixing bugs and shipping patches when we notice them, so the quickest way to fix a bug is to upgrade code-input. [Check this page for the latest version and upgrade to it, then check the below box, if possible](https://github.com/WebCoder49/code-input/releases/). If that's impossible, please keep this box unchecked and give us your version number in the steps to reproduce.
+      options:
+        - label: I'm using the latest version of code-input.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: plugins
+    attributes:
+      label: Plugins Used
+      description: Which code-input plugins did you have in your template where you saw this bug?
+      multiple: true
+      options:
+        - AutoCloseBrackets
+        - Autocomplete
+        - Autodetect
+        - FindAndReplace
+        - GoToLine
+        - Indent
+        - PrismLineNumbers
+        - SpecialChars
+        - Another external plugin (please specify in Additional Information)
+  - type: textarea
+    id: demo-or-code
+    attributes:
+      label: (Optional) Demo / Code
+      description: Please give a link to a page where you get the bug or paste your HTML, CSS and JavaScript code here. A minimal reproducible example would also be good if your project is very large / proprietary, which could be on a platform like [CodePen](https://codepen.io).
+      placeholder: Paste code / a link.
+    validations:
+      required: false
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to Reproduce
+      description: From when you loaded the page to when you encountered the bug, what steps did you take?
+      placeholder: List the steps in as much detail as possible so we can reproduce them and encounter the bug.
+      value: "1. "
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also, what did you expect to happen? Give screenshots wherever possible
+      placeholder: Give a short description and screenshots.
+    validations:
+      required: true
+  - type: textarea
+    id: what-happened-console
+    attributes:
+      label: What happened in the console?
+      description: Look in your browser's DevTools (`Ctrl+Shift+I`/`Cmd+Alt+I`) then switch to the console. Has code-input or your program logged any messages? 
+      placeholder: Paste a screenshot of the console, and/or describe it.
+    validations:
+      required: true
+  - type: dropdown
+    id: affected-browsers
+    attributes:
+      label: Affected Browsers
+      description: What browsers are you seeing the problem on? You can select multiple, and don't need to try all of them!
+      multiple: true
+      options:
+        - Google Chrome for Windows (Blink)
+        - Google Chrome for macOS (Blink)
+        - Google Chrome / Chromium for Linux (Blink)
+        - Google Chrome for Android (Blink)
+        - Google Chrome for iOS (WebKit)
+        - Microsoft Edge for Windows (Blink)
+        - Microsoft Edge for macOS (Blink)
+        - Microsoft Edge for Linux (Blink)
+        - Microsoft Edge for iOS (WebKit)
+        - Microsoft Edge for Android (Blink)
+        - Safari for macOS (WebKit)
+        - Safari for iOS (WebKit)
+        - Mozilla Firefox for Windows (Gecko)
+        - Mozilla Firefox for macOS (Gecko)
+        - Mozilla Firefox for Linux (Gecko)
+        - Mozilla Firefox for Android (Gecko)
+        - Mozilla Firefox for iOS (WebKit)
+        - Opera for Windows (Blink)
+        - Opera for macOS (Blink)
+        - Opera for Linux (Blink)
+        - Opera Mobile for Android (Blink)
+        - Opera Mini for Android (Blink)
+        - Opera Mobile for iOS (WebKit)
+        - Opera Mini for iOS (WebKit)
+        - Internet Explorer for Windows (Trident)
+        - Samsung Internet for Android (Blink)
+        - Other (please specify in Additional Information)
+    validations:
+      required: true
+  - type: dropdown
+    id: unaffected-browsers
+    attributes:
+      label: (Optional) Unaffected Browsers
+      description: What browsers, if any, are you *not* seeing the problem on? You can select multiple, and don't need to try all of them!
+      multiple: true
+      options:
+        - Google Chrome for Windows (Blink)
+        - Google Chrome for macOS (Blink)
+        - Google Chrome / Chromium for Linux (Blink)
+        - Google Chrome for Android (Blink)
+        - Google Chrome for iOS (WebKit)
+        - Microsoft Edge for Windows (Blink)
+        - Microsoft Edge for macOS (Blink)
+        - Microsoft Edge for Linux (Blink)
+        - Microsoft Edge for iOS (WebKit)
+        - Microsoft Edge for Android (Blink)
+        - Safari for macOS (WebKit)
+        - Safari for iOS (WebKit)
+        - Mozilla Firefox for Windows (Gecko)
+        - Mozilla Firefox for macOS (Gecko)
+        - Mozilla Firefox for Linux (Gecko)
+        - Mozilla Firefox for Android (Gecko)
+        - Mozilla Firefox for iOS (WebKit)
+        - Opera for Windows (Blink)
+        - Opera for macOS (Blink)
+        - Opera for Linux (Blink)
+        - Opera Mobile for Android (Blink)
+        - Opera Mini for Android (Blink)
+        - Opera Mobile for iOS (WebKit)
+        - Opera Mini for iOS (WebKit)
+        - Internet Explorer for Windows (Trident)
+        - Samsung Internet for Android (Blink)
+        - Other (please specify in Additional Information)
+    validations:
+      required: fakse
+  - type: textarea
+    id: additional-information
+    attributes:
+      label: (Optional) Additional Information
+      description: Is there anything else it might be useful for us to know about this bug?
+      placeholder: Markdown supported
+    validations:
+      required: false
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/2-plugin-suggestion.yaml b/.github/ISSUE_TEMPLATE/2-plugin-suggestion.yaml
new file mode 100644
index 0000000..1fbfe88
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/2-plugin-suggestion.yaml
@@ -0,0 +1,74 @@
+name: Plugin Suggestion
+description: Suggest or Contribute a new plugin / change to an existing plugin for code-input
+title: '[Plugin] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+        
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for suggesting additional plugins or parts of plugins.
+      description: Bugs should be mentioned in the Bug Report template, and suggestions for the core code-input.js and code-input.css files should be filed as a Core Suggestion.
+      options:
+        - label: This is an enhancement, not a bug fix, and is about plugins.
+        required: true
+  - type: checkboxes
+    id: plugin-is-new
+    attributes:
+      label: Please Check the Plugin Doesn't Already Exist
+      description: We're accumulating a good number of [plugins in the `plugin` folder](https://github.com/WebCoder49/code-input/tree/main/plugins). What you want may already exist!
+      options:
+        - label: The plugin / all the functionality I want isn't yet implemented.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: dropdown
+    id: plugins-to-extend
+    attributes:
+      label: (Optional) Enhancement of an Existing Plugin?
+      description: If you want to add more functionality to an existing plugin, please select the plugin you want more functionality in below. This is unlikely, as plugins are meant to provide small but self-contained pieces of functionality, but things like extending the Indentation plugin from tabs to also support spaces (already done) would count here. Basically, a plugin should make sense to run by itself.
+      options:
+        - AutoCloseBrackets
+        - Autocomplete
+        - Autodetect
+        - FindAndReplace
+        - GoToLine
+        - Indent
+        - PrismLineNumbers
+        - SpecialChars
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use Cases
+      description: When might this plugin be used? When do *you* plan to use it?
+    validations:
+      required: true
+  - type: textarea
+    id: parameters
+    attributes:
+      label: Parameters
+      description: List the parameters you want to be able to pass into the plugin when you instantiate it, which let you customise how it runs. If there are no needed parameters, state it.
+    validations:
+      required: true
+  - type: textarea
+    id: desired-behaviour
+    attributes:
+      label: Desired Behaviour
+      description: How do you want the plugin to look and work? If you know what user stories are, you can include them, and if you have ideas about the implementation, you can note them down here too.
+      placeholder: You can be brief if you want.
+    validations:
+      required: true
+  - type: checkboxes
+    id: plugin-is-new
+    attributes:
+      label: Will you submit a pull request?
+      description: Just suggesting a plugin is contributing, but if you want to really help us out and have the time, you can contribute the plugin via the normal fork-and-pull-request Git flow. Either way, we will contact you via the Issue you are creating for advice.
+      options:
+        - label: I will contribute this plugin through a pull request.
+          required: false
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/3-core-suggestion.yaml b/.github/ISSUE_TEMPLATE/3-core-suggestion.yaml
new file mode 100644
index 0000000..87ad0c3
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/3-core-suggestion.yaml
@@ -0,0 +1,29 @@
+name: Core Functionality Suggestion
+description: Suggest or Contribute a change to the core code-input.js / code-input.css files
+title: '[Core] '
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This form allows us to organise and implement contributions as quickly as possible. We greatly appreciate everyone who uses their time to contribute through Issues and don't mean to put you off with all the fields!
+        
+        ---
+  - type: checkboxes
+    id: correct-template
+    attributes:
+      label: This is just for suggesting new features / refactors of the core code-input code.
+      description: For example, a template creation function for another syntax-highlighting library. The code-input element not supporting a piece of native textarea functionality itself is classified as a bug and should be filed in the Bug Report template. For changes to plugins, use the Plugin Suggestion template.
+      options:
+        - label: I want a change to the core code that is not patching textarea functionality into the code-input element (as this would need a Bug Report).
+        required: true
+  - type: markdown
+    attributes:
+      value: |
+        ---
+  - type: textarea
+    id: suggestions
+    attributes:
+      label: Suggestions
+      description: List your suggestions below.
+    validations:
+      required: true
\ No newline at end of file
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000..259c40d
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,15 @@
+<!--
+Thank you for your contribution!
+
+Please read the instructions in comments so we can organise the pull request.
+
+Please make the Pull Request title describe what you have implemented clearly and concisely.
+-->
+
+Fixes #
+
+<!--
+Type the number of the Issue this is for after the #.
+
+If this does not completely resolve / implement the Issue, please remove the word Fixes and change the line to a description of what you have done. Make sure you keep the issue reference.
+-->
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index ce82c71..5bf4af2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,35 +1,34 @@
 # Contributing to `code-input`
 
-🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of the aims below, but others will be considered:
+🎉**Here at `code-input`, contributions of all sizes are more than welcome. Below are some scenarios where you could contribute and how to do so.** Contributions are generally accepted when they help achieve at least one of our aims below, but others will be considered:
 
-* The `code-input` element should act like a normal HTML `textarea` in all browsers, working with all of the normal attributes, events and other types of behaviour.
-* The `code-input` element should be easy to use with all popular syntax-highlighting libraries.
-* Any modifications of `code-input` that would be useful for the open-source community but are not core to this functionality should be available as optional plugins in the `plugins` folder. Here's where most feature contributions will go.
+1. **📝 Just like a `<textarea>`:** The core `code-input` element acts *as much as possible* like a `textarea`, including HTML forms support, but supports syntax highlighting.
+2. **🎨 Choose any highlighter:** This syntax highlighting can be implemented by *any available* library, such as Prism.js and highlight.js but including many more.
+3. **🔌 Plug (your selected plugins) and play:** The core functionality and code of `code-input` are *as lean as possible* without compromising the first two aims, and extra features that might be wanted are available as plugins, including ones in this repository. The choice to select plugins and isolate them creates user freedom and helps developers / contributors.
 
-We will generally *not* consider the following contributions:
-* Excess functionality and/or complexity in the main code-input files - these types of contributions should go in the plugin folder instead.
-* Issues that have been closed as not planned in the past (you can search the issue list to check), unless you bring a change that overcomes the reason they were not planned.
+We will generally *not* consider the contributions that place excess functionality in the `code-input.js` file rather than in a plugin. 
 
 This said, if you're not sure whether your change will be accepted, please ask in an issue.
 
----
 
-To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md).
+> To keep this community productive and enjoyable, please [don't break our code of conduct](https://github.com/WebCoder49/code-input/blob/main/CODE_OF_CONDUCT.md). I think it's mostly common sense.
 
----
 # Ways you could contribute:
-## 1. I've found a bug but don't know how / don't have time to fix it.
-If you think you've found a bug, please [submit an issue](https://github.com/WebCoder49/code-input/issues) with screenshots, how you found the bug, and copies of the console's logs if an error is in them. Please also mention the template and plugins you used (your `codeInput.registerTemplate(...)` snippet). We'd be more than happy to help you fix it. A demo using [CodePen](https://codepen.io/) would be incredibly useful.
 
-## 2. I have implemented a feature / have thought of a potential feature for the library and think it could be useful for others.
-The best way to implement a feature is as a plugin like those in the `plugins` folder of `code-input`. If you do this, you could contribute it as in point 3 below.
-Otherwise, if you do not have the time needed / do not want to implement it, any potential plugins would be [welcome as an Issue](https://github.com/WebCoder49/code-input/issues) which specifies the uses and desired characteristics.
+## Always start by submitting / finding an Issue
+
+We have a guided process in place to let you submit bug reports and feature suggestions as GitHub Issues, which you should do whether you are going to contribute a solution through a Pull Request or not.
+
+Firstly, [search the issues here](https://github.com/WebCoder49/code-input/issues) to check whether anyone else has already reported/suggested it. If so, comment that you have the same bug/idea and add any more details you think are useful.
+
+If the issue doesn't exist, [create the issue from a template here](https://github.com/WebCoder49/code-input/issues/new/choose).
+
+## Code contributions via Pull Requests
 
-## 3. I want to contribute code that I need / have seen in the Issues.
 Firstly, thank you for doing this! This is probably the most time consuming way of contributing but is also the most rewarding for both you and me as a maintainer.
 
-Please first open an issue if one doesn't already exist, and assign yourself to it. Then, [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects).
+Once you have followed the steps above to get an Issue, check that nobody else is implementing it (i.e. it is not assigned to anyone), and comment on the Issue that you want to contribute to, notifying @WebCoder49. I will assign you to the Issue to welcome your contribution, while you [make a fork of the repo and submit a pull request](https://docs.github.com/en/get-started/quickstart/contributing-to-projects).
 
-In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know! 
+You can be pretty sure I'll accept contributions that match the main aims of `code-input`, but if you doubt they will be useful you can wait until I assign you and give you the go-ahead.
 
-If an issue is open but already assigned to someone, it is probably already being worked on - you could still suggest a method of fixing it in the comments but shouldn't open a pull request as it would waste your time.
+In the pull request, include the code updates for your feature / bug, and if you're adding a new feature make sure you comment your code so it's understandable to future contributors, and if you can, add unit tests for it in tests/tester.js. If you have any questions, just let me (@WebCoder49) know!
\ No newline at end of file
diff --git a/README.md b/README.md
index 72161f6..f100204 100644
--- a/README.md
+++ b/README.md
@@ -1,41 +1,60 @@
-# code-input
+# code-input 
 
-![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![NPM](https://img.shields.io/static/v1?label=&message=NPM&color=red&style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@webcoder49/code-input)
+![Click to Switch](https://img.shields.io/static/v1?label=&message=Click%20to%20Switch:%20&color=grey&style=for-the-badge)[![GitHub](https://img.shields.io/static/v1?label=&message=GitHub&color=navy&style=for-the-badge&logo=github)](https://github.com/WebCoder49/code-input)[![NPM](https://img.shields.io/static/v1?label=&message=NPM&color=red&style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@webcoder49/code-input)[![Website & Demo](https://img.shields.io/static/v1?label=&message=Website+%26+Demo&color=purple&logoColor=white&style=for-the-badge&logo=html5)](https://webcoder49.dev/code-input)
 
-[![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.sHields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases) [![View the demo on CodePen](https://img.shields.io/static/v1?label=Demo&message=on%20CodePen&color=orange&logo=codepen&style=for-the-badge)](https://codepen.io/WebCoder49/full/jOypJOx)
+[![View License](https://img.shields.io/github/license/webcoder49/code-input?style=for-the-badge)](LICENSE) [![View Releases](https://img.shields.io/github/v/release/webcoder49/code-input?style=for-the-badge)](https://github.com/WebCoder49/code-input/releases)
 
-> ___Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form.___ [[🚀 View the Demo](https://codepen.io/WebCoder49/full/jOypJOx)]
+> ___Fully customisable, editable syntax-highlighted textareas that can be placed in any HTML form. For frontend JavaScript and TypeScript.___
+
+<iframe title="Full Demo on Website" src="./demos/full" style="width: 100%; height: 500px;"></iframe>
+
+[![Click to Get Started Quickly](https://img.shields.io/static/v1?label=&message=👇+Click+To+Get+Started+Quickly&color=orange&logoColor=white&style=for-the-badge&logo=markdown)](#-getting-started)
+
+## What does it do?
+**`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted editable textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. If you wish to see how the basic idea works, you can see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
 
 ![Using code-input with many different themes](https://user-images.githubusercontent.com/69071853/133924472-05edde5c-23e7-4350-a41b-5a74d2dc1a9a.gif)
 *This demonstration uses themes from [Prism.js](https://prismjs.com/) and [highlight.js](https://highlightjs.org/), two syntax-highlighting programs which work well with and have compatibility built-in with code-input.*
 
-*A frontend JavaScript library, with:*<br/>
-[![TypeScript Bindings - Click to Use](https://img.shields.io/static/v1?label=TypeScript%20Bindings&message=Click%20to%20Use&style=for-the-badge&color=blue&logo=typescript&logoColor=white)](https://github.com/WebCoder49/code-input-for-typescript)
+More recently, it has gained a **highly modular architecture** and **grown** due to open-source contributions, to have **many optional plugins**.
 
----
+### How's it Unique?
 
-## What does it do?
-**`code-input`** lets you **turn any ordinary JavaScript syntax-highlighting theme and program into customisable syntax-highlighted textareas** using an HTML custom element. It uses vanilla CSS to superimpose a `textarea` on a `pre code` block, then handles indentations, scrolling and fixes any resulting bugs with JavaScript. To see how it works in more detail, please see [this CSS-Tricks article](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ "Creating an Editable Textarea That Supports Syntax-Highlighted Code") I wrote.
+These features make `code-input` unique compared to other JavaScript code-editing libraries. They also dictate the long-term development of the library. 
+
+1. **📝 Just like a `<textarea>`:** The core `code-input` element acts *as much as possible* like a `textarea`, including HTML forms support, but supports syntax highlighting.
+2. **🎨 Choose any highlighter:** This syntax highlighting can be implemented by *any available* library, such as Prism.js and highlight.js but including many more.
+3. **🔌 Plug (your selected plugins) and play:** The core functionality and code of `code-input` are *as lean as possible* without compromising the first two aims, and extra features that might be wanted are available as plugins, including ones in this repository. The choice to select plugins and isolate them creates user freedom and helps developers / contributors.
 
-## What are the advantages of using code-input, and what can it be used for?
-Unlike other front-end code-editor projects, the simplicity of how `code-input` works means it is **highly customisable**. As it is not a full-featured editor, you can **choose what features you want it to include, and use your favourite syntax-highlighting algorithms and themes**.
+### Contributing
 
-The `<code-input>` element works like a `<textarea>` and therefore **works in HTML5 forms and supports using the `name`, `value` and `placeholder` attributes, events like `onchange`, form resets, to name a few...** [(Demo)](https://codepen.io/WebCoder49/details/JjmqjZv)
+As a user of this library, if you find a bug that breaks any of these aims, or a plugin you want is not present, [please see our `CONTRIBUTING.md` file](CONTRIBUTING.md). It will be greatly appreciated and help us keep this library thriving.
+
+|[![Contributors](https://contrib.rocks/image?repo=WebCoder49%2Fcode-input)](https://github.com/WebCoder49/code-input/graphs/contributors)|
+|---|
+|...have contributed pull requests so far.|
+|(source: [contrib.rocks](https://contrib.rocks))|
 
-`code-input` has also accumulated many **features in optional [plugins](./plugins/README.md)** from open-source contributions, allowing you to choose any features you want. If a feature you want is not present, [please open an issue / contribute it!](#contributing)
+## 🚀 Getting Started
 
-## 🚀 Getting Started With `code-input` (in 4 simple steps)
+### Links to Demos / Alternative Starting Points
+To see if `code-input` is right for you and try out its range of optional plugins, you can use the full demo below. The starter demos also show you their code so you can use them to help you get started. 
+* [![Full Demo](https://img.shields.io/static/v1?label=&message=Full+Demo&color=blue&logoColor=white&style=default&logo=javascript)](https://webcoder49.dev/code-input/demos/full)
+* [![Starter Demo & Code for Prism.js](https://img.shields.io/static/v1?label=&message=Starter+Demo+%26+Code+for+Prism.js&color=purple&logoColor=white&style=default&logo=javascript)](https://webcoder49.dev/code-input/demos/prism)
+* [![Starter Demo & Code for highlight.js](https://img.shields.io/static/v1?label=&message=Starter+Demo+%26+Code+for+highlight.js&color=orange&logoColor=white&style=default&logo=javascript)](https://webcoder49.dev/code-input/demos/hljs)
 
-## [`code-input` also supports TypeScript (click)](https://github.com/WebCoder49/code-input-for-typescript)
+### Written Guide
 
-**You can follow the instructions below, or use the starter code available [here for highlight.js](https://codepen.io/WebCoder49/pen/vYMpMoJ?editors=1100) and here for [here for Prism.js](https://codepen.io/WebCoder49/pen/ExzNRyb?editors=1100).**
+`code-input` is designed to be **both easy to use and customisable**.
 
-`code-input` is designed to be **both easy to use and customisable**. Here's how to use it to create syntax-highlighted textareas: 
+> 📚 **If you're using TypeScript,** `code-input` and the steps below should work for both plain JavaScript and TypeScript once you link the library and its `.d.ts` bindings. [Here's an annotated example project.](https://github.com/WebCoder49/code-input-for-typescript)
 
-### 1. Import `code-input`
+#### 1. Import `code-input`
 - **First, import your favourite syntax-highlighter's JS and CSS theme files** to turn editable. 
 - Then, import the CSS and JS files of `code-input` from a downloaded release or a CDN. The non-minified files are useful for using during development.
 
+> ⬇️ **For a downloaded release,** you should download all of the files in this repository from [the latest release]() and keep at least the license and the JavaScript and CSS files in the root folder and `plugins` folder. When you've imported all the plugins you need, you can (but don't have to) delete the rest. The `.github`, `demos` and `tests` folders are all for development so can be deleted.
+
 <details>
 <summary>
 Locally downloaded (Click)
@@ -54,12 +73,12 @@ From JSDelivr CDN (click)
 
 ```html
 <!--In the <head>-->
-<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.css">
+<script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.3/code-input.min.css">
 ```
 </details>
 
-### 2. Creating a template
+#### 2. Creating a template
 The next step is to set up a `template` to link `code-input` to your syntax-highlighter. If you're using Prism.js or highlight.js, you can use the built-in template, or you can create your own otherwise. In these examples, I am registering the template as `"syntax-highlighted"`, but you can use any template name as long as you are consistent.
 
 - *Highlight.js:*
@@ -94,7 +113,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
   ));
   ```
 
-### 3. Adding plugins
+#### 3. Adding plugins
 [Plugins](./plugins/) allow you to add extra features to a template, like [automatic indentation](plugins/indent.js) or [support for highlight.js's language autodetection](plugins/autodetect.js). To use them, just:
 - Import the plugins' JS files after you have imported `code-input` and before registering the template.
 - Place instances of the plugins in the array of plugins argument when registering, like this:
@@ -119,7 +138,7 @@ The next step is to set up a `template` to link `code-input` to your syntax-high
 
 To see a full list of plugins and their functions, please see [plugins/README.md](./plugins/README.md).
 
-### 4. Using the component
+#### 4. Using the component
 Now that you have registered a template, you can use the custom `<code-input>` element in HTML. If you have more than one template registered, you need to add the template name as the `template` attribute. With the element, using the `language` attribute will add a `language-{value}` class to the `pre code` block. You can now use HTML attributes and events, as well as CSS styles, to make your element as simple or interactive as you like, as if it were a `textarea` element! 
   ```HTML
   <code-input language="HTML"></code-input>
@@ -131,11 +150,8 @@ Now that you have registered a template, you can use the custom `<code-input>` e
 
 > ⚠️ At the moment, you need to set the `--padding` property rather than `padding` for a `code-input` element's CSS. All other properties should work as normal.
 
-## Contributing
-If you have any features you would like to add to `code-input` as plugins or core functionality, or have found any bugs, please [open an issue](https://github.com/WebCoder49/code-input/issues) or [fork and submit a pull request](https://github.com/WebCoder49/code-input/fork)! All contributions to this open-source project will be greatly appreciated. You can see [more info in our `CONTRIBUTING.md` file](CONTRIBUTING.md).
+#### 5. (Optional) Contributing
 
+We can help you, and you can help us, to meet your full potential with `code-input` and even create new plugins! Found a bug? Please let us know!
 
-|[![Contributors](https://contrib.rocks/image?repo=WebCoder49%2Fcode-input)](https://github.com/WebCoder49/code-input/graphs/contributors)|
-|---|
-|...have contributed pull requests so far.|
-|(source: [contrib.rocks](https://contrib.rocks))|
+[See `CONTRIBUTING.md`.](CONTRIBUTING.md)
\ No newline at end of file
diff --git a/code-input.d.ts b/code-input.d.ts
index 1f0ea6b..3731761 100644
--- a/code-input.d.ts
+++ b/code-input.d.ts
@@ -86,7 +86,7 @@ export namespace plugins {
      * Create an auto-close brackets plugin to pass into a template
      * @param {Object} bracketPairs Opening brackets mapped to closing brackets, default and example {"(": ")", "[": "]", "{": "}", '"': '"'}. All brackets must only be one character.
      */
-    constructor(bracketPairs: Object);
+    constructor(bracketPairs?: Object);
   }
 
   /**
@@ -95,10 +95,11 @@ export namespace plugins {
    */
   class Autocomplete extends Plugin {
     /**
-     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd), and optionally another initialisation callback.
      * @param {function} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * @param {function} initCallback a function to set up the popup / keybindings that runs after the elements have been added to the textarea and takes in (popup element, code-input element).
      */
-    constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void);
+    constructor(updatePopupCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void, initCallback: (popupElem: HTMLElement, textarea: HTMLTextAreaElement, selectionEnd: number) => void);
   }
 
   /**
diff --git a/demos/full/index.html b/demos/full/index.html
new file mode 100644
index 0000000..2a11313
--- /dev/null
+++ b/demos/full/index.html
@@ -0,0 +1,301 @@
+<!--This is the code of the page you're on now!
+For simplicity's sake, editing it won't change this page. Use the full demo to see functionality like that.
+Here's the code for this minimal usage of code-input with highlight.js.-->
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>code-input Full demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <!--Import Prism.js-->
+  <!--For a downloaded version of Prism.js: -->
+  <!--  1. Download Prism.js with the languages you need here: https://prismjs.com/download.html -->
+  <!--  2. Replace the JavaScript imports below with one import of prism.js (prism-core.js and prism-autoloader.js are designed for online CDNs like the one currently being used).-->
+  <!--  3. Ensure the file paths of imported CSS and JavaScript files are relative from this HTML file.-->
+  <!--Guide: https://prismjs.com/#basic-usage-->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29/themes/prism.min.css" id="prism-css">
+  <!--You can also choose custom themes by changing "prism" above to something like "prism-dark" from https://prismjs.com/index.html -->
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29/components/prism-core.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29/plugins/autoloader/prism-autoloader.min.js"></script>
+
+  <!--For prism-line-numbers plugin-->
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29/plugins/line-numbers/prism-line-numbers.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29/plugins/line-numbers/prism-line-numbers.min.css">
+
+
+  <!--Import highlight.js-->
+  <!--For a downloaded version of highlight.js, replace the file paths for both CSS and JS below with the relative file paths from this HTML file.-->
+  <!--This is similar to the "self hosted" example below.-->
+  <!--Guide: https://highlightjs.org/#usage#:~:text=As%20HTML%20Tags -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/default.min.css" id="hljs-css">
+  <!--You can also choose custom themes by changing "default" above to the theme name from https://highlightjs.org/demo -->
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/highlight.min.js"></script>
+
+  <!--Import highlight.js languages-->
+  <!--You can copy this line to import additional languages, replacing "javascript" with a language name from https://highlightjs.org/demo .-->
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/html.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/css.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/javascript.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/typescript.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/java.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/python.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/csharp.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/cpp.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/c.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/rust.min.js"></script>
+
+  <!--Import code-input-->
+  <!--The same goes for downloaded versions.-->
+  <!--TODO: <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.js"></script> -->
+  <script src="../../code-input.js"></script>
+  <!--TODO: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.css"> -->
+  <link rel="stylesheet" href="../../code-input.css">
+
+  <!--Import some code-input plugins-->
+  <!--The same goes for downloaded versions.-->
+  <!--Plugin files are here: https://github.com/WebCoder49/code-input/tree/main/plugins.-->
+  <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/auto-close-brackets.min.js"></script>
+  <!-- TODO: <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/autocomplete.min.js"></script> -->
+  <script src="../../plugins/autocomplete.js"></script>
+  <!--TODO: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/autocomplete.min.css"/> -->
+  <link rel="stylesheet" href="../../plugins/autocomplete.css"/>
+  <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/autodetect.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/find-and-replace.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/find-and-replace.min.css"/>
+  <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/go-to-line.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/go-to-line.min.css"/>
+  <!--TODO: <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/indent.min.js"></script> -->
+  <script src="../../plugins/indent.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/prism-line-numbers.min.css"/>
+  <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/special-chars.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/special-chars.min.css"/>
+
+
+  <style>
+    code-input .code-input_autocomplete_popup {
+      display: none; /* Until code adds content to it */ 
+
+      background-color: white;
+      padding: 5px;
+      border: 2px solid black;
+      opacity: 0.9;
+
+      font-family: monospace;
+      overflow: hidden;
+    }
+    code-input .code-input_autocomplete_popup .to-insert {
+      color: blue;
+    }
+  </style>
+
+  <!--Register code-input template-->
+  <script type="module">
+    // ----------------------Autocomplete-------------------------
+    // ---Configuration more complex but extremely customisable---
+
+    // In this example, Emmet used for autocomplete
+    import expand, { extract } from 'https://cdn.jsdelivr.net/npm/emmet@2.4.7/+esm';
+    /**
+     * Get the expansion of the emmet abbreviation given the code and position of the caret in the code.
+     */
+    function getEmmetExpansion(code, caretPosition) {
+    }
+
+    const indentPlugin = new codeInput.plugins.Indent(true, 2); // true=Indent using spaces rather than tab characters; 2 = 2 spaces per indentation
+
+    const autocompletePlugin = new codeInput.plugins.Autocomplete((popupElem, textarea, selectionEnd) => {
+      // Runs each keystroke
+      let expansion;
+      let emmetExpression;
+      if(textarea.selectionStart !== textarea.selectionEnd) {
+        // When text selected don't try to expand
+        expansion = undefined;
+      } else {
+        let codeInputElement = textarea.parentElement;
+        // Make sure abbreviations match language
+        if(codeInputElement.getAttribute("language") == null) {
+          emmetExpression = undefined;
+        } else if(["HTML", "PHP", "XML"].includes(codeInputElement.getAttribute("language").toUpperCase())) {
+          emmetExpression = extract(textarea.value, selectionEnd, { type: "markup" });
+        } else if(codeInputElement.getAttribute("language").toUpperCase() === "CSS") {
+          emmetExpression = extract(textarea.value, selectionEnd, { type: "stylesheet" });
+        } else {
+          emmetExpression = undefined;
+        }
+
+        if(emmetExpression === undefined) {
+          expansion = undefined;
+        } else {
+          if(["HTML", "PHP", "XML"].includes(codeInputElement.getAttribute("language").toUpperCase())) {
+            expansion = expand(emmetExpression.abbreviation, { type: "markup" });
+          } else {
+            expansion = expand(emmetExpression.abbreviation, { type: "stylesheet" });
+          }
+          expansion = expansion.replace(/\t/g, "  "); // Change to 2-space indentation as code-input expects
+        }
+      }
+      if(expansion === undefined) {
+        popupElem.style.display = "none";
+        // Tabs used to trigger indentation, not expansion, when autocomplete popup hidden
+        indentPlugin.enableTabIndentation();
+      } else {
+        popupElem.style.display = "block";
+        // Tabs used to trigger expansion, not indentation, when autocomplete popup showing
+        indentPlugin.disableTabIndentation();
+        
+        popupElem.innerHTML = "";
+        let insertHint = document.createElement("span");
+        insertHint.classList.add("insert-hint");
+        insertHint.innerText = "[Tab] to insert "
+        let toInsert = document.createElement("span");
+        toInsert.classList.add("to-insert");
+        toInsert.innerText = expansion;
+
+        popupElem.append(insertHint);
+        popupElem.append(toInsert);
+
+        popupElem.onclick = () => {
+          // onclick so overwrites old expansion
+          // Insert expansion at position of abbreviation
+          textarea.selectionStart = emmetExpression.start;
+          textarea.selectionEnd = emmetExpression.end;
+          textarea.focus();
+          document.execCommand("insertText", false, expansion);
+        }
+      }
+    }, (popupElem, codeInputElem) => {
+      // Runs when code-input initialised
+      popupElem.style.display = "none"; // Hidden until triggered to appear
+
+      codeInputElem.addEventListener("keydown", (event) => {
+        if(popupElem.style.display != "none") {
+          // Autocomplete
+          if(event.key == "Tab") {
+            event.preventDefault();
+            popupElem.click();
+          }
+        }
+      });
+    });
+
+    // ------------------------Register---------------------------
+    // -----------------Templates and plugins---------------------
+
+    let commonPlugins = [
+      // Plugins for both Prism.js and highlight.js
+      // You can add or remove plugins in this list from https://github.com/WebCoder49/code-input/blob/main/plugins/README.md.
+      // All plugins used must be imported above.
+      new codeInput.plugins.AutoCloseBrackets(),
+      autocompletePlugin,
+      new codeInput.plugins.FindAndReplace(),
+      new codeInput.plugins.GoToLine(),
+      indentPlugin,
+      new codeInput.plugins.SpecialChars(),
+    ];
+    codeInput.registerTemplate("prism",
+      codeInput.templates.prism(
+        Prism,
+        commonPlugins.concat([
+          // Prism.js-specific plugins
+          // none
+        ])
+      )
+    );
+    codeInput.registerTemplate("hljs",
+      codeInput.templates.hljs(
+        hljs,
+        commonPlugins.concat([
+          // highlight.js-specific plugins
+          new codeInput.plugins.Autodetect(),
+        ])
+      )
+    );
+  </script>
+  <style>
+    body {
+      margin: 0;
+      padding: 10px;
+    }
+
+    nav, p, h1, h2, h3, h4, h5, h6, label, li {
+      font-family: sans-serif;
+    }
+
+    nav {
+      padding: 10px;
+      min-height: 10px;
+      margin: 0px;
+      position: sticky;
+      top: 0;
+      background-color: white;
+      z-index: 1;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="full-page">
+    <nav><a href="../../">&lt; Back Home</a> || <strong>Full demo</strong> || <a href="../prism/">Prism.js starter</a>
+      || <a href="../hljs/">highlight.js starter</a> <code style="float: right;">code-input v2.2</code></nav>
+    <h1>Full Demo of code-input</h1>
+    <p>All its plugins are loaded, with both Prism.js and highlight.js, and it's ready to show you its full potential!
+    </p>
+    <p>If you want a minimal starter template, there are Prism.js starter and highlight.js starter demos at the links above.</p>
+  </div>
+  <script>
+    if(window != window.top) {
+      /* In an iframe */
+      document.getElementById("full-page").setAttribute("hidden", true);
+    }
+  </script>
+
+  <label for="highlighter"><strong>Choose highlighter (we can't load both and let their CSS files clash):</strong> </label>
+  <select onchange="document.getElementById(`prism-css`).setAttribute('disabled', true); document.getElementById(`hljs-css`).setAttribute('disabled', true); document.getElementById(`${this.value}-css`).removeAttribute('disabled'); document.getElementById(`prism-demo`).setAttribute('hidden', true); document.getElementById(`hljs-demo`).setAttribute('hidden', true); document.getElementById(`${this.value}-demo`).removeAttribute('hidden');" id="highlighter"><option value="prism">Prism.js</option><option value="hljs">highlight.js</option></select>
+  <section id="prism-demo">
+    <h2>Prism.js + <code>code-input</code> plugins + JavaScript interaction</h2>
+    <label for="prism-theme">Choose theme: </label>
+    <select onchange="document.getElementById('prism-css').setAttribute('href', `https:\/\/cdn.jsdelivr.net/npm/prismjs@1.29/themes/${this.value}.min.css`)" id="prism-theme">
+      <option value="prism">Default</option>
+      <option value="prism-dark">Dark</option>
+      <option value="prism-funky">Funky</option>
+      <option value="prism-okaidia">Okaidia</option>
+      <option value="prism-twilight">Twilight</option>
+      <!-- <option value="prism-coy">Coy</option> - currently not supported. -->
+      <option value="prism-solarizedlight">Solarized Light</option>
+      <option value="prism-tomorrow">Tomorrow Night</option>
+    </select>
+    <code-input class="line-numbers" template="prism" language="HTML" id="prism-code-input">html:5</code-input>
+    <p>
+      <button onclick="document.getElementById('prism-result').setAttribute('src', `data:text/html,${document.getElementById('prism-code-input').value}`);">Render Preview</button>
+      <br/>
+      <iframe style="width: calc(100% - 20px); border: 0; outline: 0; border-top: 2px solid grey; border-bottom: 2px solid grey; margin: 10px; border-radius: 10px; height: 500px;" src="data:text/html,Live preview of your code" id="prism-result"></iframe>
+    </p>
+  </section>
+  
+  <section id="hljs-demo" hidden>
+    <h2>highlight.js + <code>code-input</code> plugins + HTML5 form</h2>
+    <label for="hljs-theme">Choose theme: </label><input onchange="document.getElementById('hljs-css').setAttribute('href', `https:\/\/cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/${this.value}.min.css`)" id="hljs-theme" value="default"></input>
+    <p>^ How about <code>default</code>, <code>atom-one-dark</code> or <code>github-dark</code>? You can also try any <a href="https://highlightjs.org/demo">theme from highlight.js' demo</a>.</p>
+    <form method="get" action="https://github.com/search">
+      <code-input name="q" template="hljs" placeholder="Autodetect plugin allows any language! Autocomplete with Emmet supports HTML and CSS."></code-input>
+      <input name="type" type="hidden" value="code"/>
+      <input type="submit" value="Search GitHub for your code"/>
+    </form>
+  </section>
+
+  <ul>
+    <li>The <strong>AutoCloseBrackets</strong> plugin ensures you always get complete bracket pairs when you type an opening bracket.</li>
+    <li>The <strong>Autocomplete</strong> plugin allows a popup to appear when you type and makes it be positioned correctly, then leaves you to define its functionality and appearance. Here we've combined it with <a href="https://www.npmjs.com/package/emmet">Emmet</a> to expand abbreviations.</li>
+    <li>The <strong>Autodetect</strong> plugin (highlight.js only) auto-detects and highlights the programming language. Here we've combined it with Autocomplete to offer you autocomplete suggestions for HTML or CSS only when your code is that language.</li>
+    <li>The <strong>FindAndReplace</strong> plugin provides you with the Ctrl+F and Ctrl+H functionality. It doesn't care which highlighter you use, be it Prism.js, highlight.js, or something else!</li>
+    <li>The <strong>GoToLine</strong> plugin provides you with the Ctrl+G functionality. It doesn't care which highlighter you use, be it Prism.js, highlight.js, or something else!</li>
+    <li>The <strong>PrismLineNumbers</strong> plugin (Prism.js only, to be used with <a href="https://prismjs.com/plugins/line-numbers/">the Prism.js <code>line-numbers</code> plugin</a>) ensures the user interface remains correct when line numbers are applied.</li>
+    <li>The <strong>SpecialChars</strong> plugin <code></code></li>
+  </ul>
+
+  <!--Additional usage details are here: https://github.com/WebCoder49/code-input/blob/main/README.md-->
+  <!--A list of plugins are here, allowing a well-rounded code-editor to be created quickly from code-input, if you're into that: https://github.com/WebCoder49/code-input/blob/main/plugins/README.md-->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demos/hljs/index.html b/demos/hljs/index.html
new file mode 100644
index 0000000..f5af053
--- /dev/null
+++ b/demos/hljs/index.html
@@ -0,0 +1,99 @@
+<!--This is the code of the page you're on now!
+For simplicity's sake, editing it won't change this page. Use the full demo to see functionality like that.
+Here's the code for this minimal usage of code-input with highlight.js.-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>code-input with highlight.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    
+    <!--Import highlight.js-->
+    <!--For a downloaded version of highlight.js, replace the file paths for both CSS and JS below with the relative file paths from this HTML file.-->
+    <!--This is similar to the "self hosted" example below.-->
+    <!--Guide: https://highlightjs.org/#usage#:~:text=As%20HTML%20Tags-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/styles/default.min.css">
+    <!--You can also choose custom themes by changing "default" above to the theme name from https://highlightjs.org/demo-->
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/highlight.min.js"></script>
+    
+    <!--Import highlight.js languages-->
+    <!--You can copy this line to import additional languages, replacing "javascript" with a language name from https://highlightjs.org/demo.-->
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9/build/languages/javascript.min.js"></script>
+    
+    <!--Import code-input-->
+    <!--The same goes for downloaded versions, but with relative file paths.-->
+    <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.css">
+    
+    <!--Import some code-input plugins-->
+    <!--The same goes for downloaded versions, but with relative file paths.-->
+    <!--Plugin files are here: https://github.com/WebCoder49/code-input/tree/main/plugins.-->
+    <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/indent.min.js"></script>
+    
+    <!--Register code-input template-->
+    <script>
+      codeInput.registerTemplate("syntax-highlighted", 
+        codeInput.templates.hljs(
+          hljs, 
+          [
+            // You can add or remove plugins in this list from https://github.com/WebCoder49/code-input/blob/main/plugins/README.md.
+            // All plugins used must be imported above.
+            new codeInput.plugins.Indent(true, 2) // Allow Tab-key indentation, with 2 spaces indentation
+          ]
+        )
+      );
+      // Register other templates with different names here, if needed.
+    </script>
+    <style>
+      body {
+        margin: 0;
+        padding: 10px;
+      }
+      nav, p, h1, h2, h3, h4, h5, h6 {
+        font-family: sans-serif;
+      }
+      nav {
+        padding: 10px;
+        min-height: 10px;
+        margin: 0px;
+        position: sticky;
+        top: 0;
+        background-color: white;
+        z-index: 1;
+      }
+      code-input {
+        margin: 10px;
+        --padding: 10px; /* The -- is needed, as a small caveat of the current version of code-input. */
+        height: calc(100vh - 70px);
+      }
+    </style>
+  </head>
+  <body>
+    <nav><a href="../../">&lt; Back Home</a> || <a href="../full/">Full demo</a> || <a href="../prism/">Prism.js starter</a> || <strong>highlight.js starter</strong> <code style="float: right;">code-input v2.2</code></nav>
+
+    <!--The language attribute is case-insensitive but must refer to a language imported above.-->
+    <code-input template="syntax-highlighted" language="HTML">&lt;!--Loading HTML--&gt;</code-input>
+    <!--You should now be able to use the code-input element in HTML5 forms / attributes and with JavaScript events / properties as if it were a textarea!-->
+    
+    <!--Additional usage details are here: https://github.com/WebCoder49/code-input/blob/main/README.md-->
+    <!--A list of plugins are here. We recommend the Autodetect plugin with highlight.js: https://github.com/WebCoder49/code-input/blob/main/plugins/README.md-->
+
+    <script>
+        // The document must be loaded to interact with its elements
+        window.addEventListener("load", function() {
+            // Just for the demo
+            const pageCodeRequest = new Request(window.location);
+            fetch(pageCodeRequest)
+                .then((response) => {
+                    if(!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.text();
+                })
+                .then((response) => {
+                    // Accessed just like a textarea!
+                    document.querySelector("code-input").value = response;
+                });
+        });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demos/prism/index.html b/demos/prism/index.html
new file mode 100644
index 0000000..f630763
--- /dev/null
+++ b/demos/prism/index.html
@@ -0,0 +1,98 @@
+<!--This is the code of the page you're on now!
+For simplicity's sake, editing it won't change this page. Use the full demo to see functionality like that.
+Here's the code for this minimal usage of code-input with Prism.js.-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>code-input with Prism.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    
+    <!--Import Prism.js-->
+    <!--For a downloaded version of Prism.js: -->
+    <!--  1. Download Prism.js with the languages you need here: https://prismjs.com/download.html-->
+    <!--  2. Replace the JavaScript imports below with one import of prism.js (prism-core.js and prism-autoloader.js are designed for online CDNs like the one currently being used).-->
+    <!--  3. Ensure the file paths of imported CSS and JavaScript files are relative from this HTML file.-->
+    <!--Guide: https://prismjs.com/#basic-usage-->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29/themes/prism.min.css">
+    <!--You can also choose custom themes by changing "prism" above to something like "prism-dark" from https://prismjs.com/index.html-->
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29/components/prism-core.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29/plugins/autoloader/prism-autoloader.min.js"></script>
+        
+    <!--Import code-input-->
+    <!--The same goes for downloaded versions.-->
+    <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/code-input.min.css">
+    
+    <!--Import some code-input plugins-->
+    <!--The same goes for downloaded versions.-->
+    <!--Plugin files are here: https://github.com/WebCoder49/code-input/tree/main/plugins.-->
+    <script src="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.2/plugins/indent.min.js"></script>
+    
+    <!--Register code-input template-->
+    <script>
+      codeInput.registerTemplate("syntax-highlighted", 
+        codeInput.templates.prism(
+          Prism, 
+          [
+            // You can add or remove plugins in this list from https://github.com/WebCoder49/code-input/blob/main/plugins/README.md.
+            // All plugins used must be imported above.
+            new codeInput.plugins.Indent(true, 2) // Allow Tab-key indentation, with 2 spaces indentation
+          ]
+        )
+      );
+      // Register templates with different names here, if needed.
+    </script>
+    <style>
+        body {
+          margin: 0;
+          padding: 10px;
+        }
+        nav, p, h1, h2, h3, h4, h5, h6 {
+          font-family: sans-serif;
+        }
+        nav {
+          padding: 10px;
+          min-height: 10px;
+          margin: 0px;
+          position: sticky;
+          top: 0;
+          background-color: white;
+          z-index: 1;
+        }
+        code-input {
+            margin: 10px;
+            --padding: 10px; /* The -- is needed, as a small caveat of the current version of code-input. */
+            height: calc(100vh - 70px);
+        }
+    </style>
+  </head>
+  <body>
+    <nav><a href="../../">&lt; Back Home</a> || <a href="../full/">Full demo</a> || <strong>Prism.js starter</strong> || <a href="../hljs/">highlight.js starter</a> <code style="float: right;">code-input v2.2</code></nav>
+
+    <!--The language attribute is case-insensitive but must refer to a language from https://prismjs.com/index.html#supported-languages.-->
+    <code-input template="syntax-highlighted" language="HTML">&lt;!--Loading HTML--&gt;</code-input>
+    <!--You should now be able to use the code-input element in HTML5 forms / attributes and with JavaScript events / properties as if it were a textarea!-->   
+    
+    <!--Additional usage details are here: https://github.com/WebCoder49/code-input/blob/main/README.md-->
+    <!--A list of plugins are here, allowing a well-rounded code-editor to be created quickly from code-input, if you're into that: https://github.com/WebCoder49/code-input/blob/main/plugins/README.md-->
+
+    <script>
+        // The document must be loaded to interact with its elements
+        window.addEventListener("load", function() {
+            // Just for the demo
+            const pageCodeRequest = new Request(window.location);
+            fetch(pageCodeRequest)
+                .then((response) => {
+                    if(!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.text();
+                })
+                .then((response) => {
+                    // Accessed just like a textarea!
+                    document.querySelector("code-input").value = response;
+                });
+        });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index 9206385..9b66681 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webcoder49/code-input",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Fully customisable, editable syntax-highlighted textareas.",
   "browser": "code-input.js",
   "scripts": {
diff --git a/plugins/autocomplete.js b/plugins/autocomplete.js
index f4d1efd..dd9f3e7 100644
--- a/plugins/autocomplete.js
+++ b/plugins/autocomplete.js
@@ -4,12 +4,14 @@
  */
 codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
     /**
-     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd).
-     * @param {function} updatePopupCallback  a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * Pass in a function to create a plugin that displays the popup that takes in (popup element, textarea, textarea.selectionEnd), and optionally another initialisation callback.
+     * @param {function} updatePopupCallback a function to display the popup that takes in (popup element, textarea, textarea.selectionEnd).
+     * @param {function} initCallback a function to set up the popup / keybindings that runs after the elements have been added to the textarea and takes in (popup element, code-input element).
      */
-    constructor(updatePopupCallback) {
+    constructor(updatePopupCallback, initCallback=function(popup, codeInput) {}) {
         super([]); // No observed attributes
         this.updatePopupCallback = updatePopupCallback;
+        this.initCallback = initCallback;
     }
     /* When a key is pressed, or scrolling occurs, update the popup position */
     updatePopup(codeInput, onlyScrolled) {
@@ -30,8 +32,8 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         codeInput.appendChild(popupElem);
 
         let testPosPre = document.createElement("pre");
-        popupElem.setAttribute("inert", true); // Invisible to keyboard navigation
-        popupElem.setAttribute("tabindex", -1); // Invisible to keyboard navigation
+        testPosPre.setAttribute("inert", true); // Invisible to keyboard navigation
+        testPosPre.setAttribute("tabindex", -1); // Invisible to keyboard navigation
         testPosPre.setAttribute("aria-hidden", true); // Hide for screen readers
         if(codeInput.template.preElementStyled) {
             testPosPre.classList.add("code-input_autocomplete_testpos");
@@ -44,8 +46,10 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         }
         
         let textarea = codeInput.textareaElement;
-        textarea.addEventListener("input", () => { this.updatePopup(codeInput, false)});
+        textarea.addEventListener("keyup", (event) => { this.updatePopup(codeInput, false)});
         textarea.addEventListener("click", () => { this.updatePopup(codeInput, false)});
+
+        this.initCallback(popupElem, codeInput);
     }
     /**
      * Return the coordinates of the caret in a code-input
diff --git a/plugins/autocomplete.min.css b/plugins/autocomplete.min.css
index 549bd0c..81c8acc 100644
--- a/plugins/autocomplete.min.css
+++ b/plugins/autocomplete.min.css
@@ -1 +1 @@
-code-input .code-input_autocomplete_popup{display:block;position:absolute;margin-top:1em;z-index:100}code-input .code-input_autocomplete_testpos{opacity:0}
\ No newline at end of file
+code-input .code-input_autocomplete_popup{display:block;position:absolute;margin-top:1em;z-index: 2;pointer-events: all;}code-input .code-input_autocomplete_testpos{opacity:0}
\ No newline at end of file