# Anki "watch" a HTML file as a card template

**URL:** <https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511>\
**Category:** Card Design\
**Created:** [June 3, 2022, 2:57am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511 "2022-06-03T02:57:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![iliekprogrammar](https://avatars.discourse-cdn.com/v4/letter/i/b9e5f3/32.png) [@iliekprogrammar](https://forums.ankiweb.net/u/iliekprogrammar)\
**Post date:** [June 3, 2022, 2:57am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511/1 "2022-06-03T02:57:00Z")

</div>

I’m thinking of making a card template with some UI functionality, and i would like to rapidly make small changes and see them in anki without repeatedly `Ctrl+C Ctrl+V` into a dummy card template. the main reason i didn’t just use my browser is because of the added bonus of anki easily syncing into ankiweb and ankidroid for testing, considering how different each of those platforms are. and i’m using various web technologies (partly for learning), so editing the card template inside anki isn’t viable.

so my question is, how to get a “card template watch” functionality for anki? i’ve thought of learning ankiconnect for this, but figured i’d search around and ask for help first.

for anyone who’s curious about what exactly my card template uses, i’m trying to build on top of [Z233](https://github.com/Z233?tab=repositories&q=anki)’s card templates on github. i’ve only just begun, but i would like to make prototyping my own UI easier.

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/abdo/32/654_2.png) [@abdo](https://forums.ankiweb.net/u/abdo)\
**Post date:** [June 3, 2022, 3:22am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511/2 "2022-06-03T03:22:46Z")

</div>

You probably have to write an add-on (or a script that uses AnkiConnect) that watches for changes to the file and updates the template accordingly. Some useful links after brief googling:  
[python - How do I watch a file for changes? - Stack Overflow](https://stackoverflow.com/questions/182197/how-do-i-watch-a-file-for-changes) (Check out the Qt solution based on QFileSystemWatcher if you want to go for the add-on solution)  
[Watchdog — watchdog 0.8.2 documentation](https://pythonhosted.org/watchdog/)  
[GitHub - samuelcolvin/watchfiles: Simple, modern and high performance file watching and code reload in python.](https://github.com/samuelcolvin/watchfiles)

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [June 3, 2022, 3:30am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511/3 "2022-06-03T03:30:46Z")

</div>

Another option would be to _externalize_ your JS into `collection_media` with a `<script>` tag and then symlink your project output.

You’ll only have to reopen the preview to see your changes.

---

<div class="post-metadata">

**Author:** ![iliekprogrammar](https://avatars.discourse-cdn.com/v4/letter/i/b9e5f3/32.png) [@iliekprogrammar](https://forums.ankiweb.net/u/iliekprogrammar)\
**Post date:** [June 3, 2022, 3:41am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511/4 "2022-06-03T03:41:11Z")

</div>

i thought about linking `<script>` too, but i then realized i need to expose the field replacements manually instead of inside the project. ankiconnect seems to be my only option that builds on top of existing stuff. i’d hate to have _another_ addon which can be eclipsed by other addons like ankiconnect. anyways, thanks @abdo and @kleinerpirat!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 7:35am UTC](https://forums.ankiweb.net/t/anki-watch-a-html-file-as-a-card-template/20511/5 "2023-05-01T07:35:20Z")

</div>


