Better Notes Mod

  • Moderator

    Hello all,

    I've made a mod to allow for advanced notes editing in Vivaldi. This used to be a small mod, but I re-wrote it from scratch to allow for more features. Sort of as a bridge to This FR


    • Full-Page Editing, using Panel Sidebar for Navigating
    • Split Re-Sizeable Editor and Previewer (Can Toggle)
    • Scroll Sync between Editor and Previewer (Can Toggle)
    • Formatting Toolbar
    • Quick access to TXT/HTML Exports
    • Word Count Stats
    • Usable in a Narrow Window
    • Supports English and French (thanks to @Cqoicebordel)
    • Autosaves Text and Title when changed
    • Search Highlighting
    • Follows Browser Theme
    • Drag images to add attachments



    This mod comes in many separate parts and requires a bit of configuration to install, so read carefully.

    1. Download the following 6 files: betterNotes.css, betterNotes.js, betterNotesEditor.css, betterNotesEditor.html, betterNotesEditor.js, betterNotesEditor.png
    2. Open betterNotes.js
    3. After const EDITOR_TOOLTIP, set which language you want to use
    4. Set const EDITOR_URI to point to wherever betterNotesEditor.html will end up being installed. As an example, my mod installation script installs it under resources/vivaldi/user_modfiles/betterNotesEditor.html. You should change const EDITOR_URI according to your setup.
    5. Open betterNotesEditor.js
    6. After const SELECTED_LANGUAGE, set which language you want to use
    7. If you want super-ultra-security, open betterNotesEditor.html and remove the rule img-src *; from the Content Security Tag. This will prevent images from loading, and as a security bonus... it will prevent images from loading šŸ˜Ž.
    8. Install the JS files and CSS files as described here: Modding
    9. Copy the HTML and PNG file into the location under resources/vivaldi folder as you set in step 4.
    10. Restart the browser.
    11. Open the notes panel, select a note and click the Switch to Markdown button. Don't turn this back to the editor (see very important note below).


    • Opening - Open the notes panel, Click the newly added Open Notes Editor button, up in the panel toolbar
    • Editing Titles - You can change the title in the input at the top-left of the editor page
    • Editing Notes - You can edit notes in the big editor in the page
    • Previewing - Click the "Show markdown" button in the bottom-right
    • Scrolling - You can sync the scrolling of the editor and the viewer by using the sync scroll checkbox in the bottom right
    • Resize the columns - Use the drag handle at the bottom right of the editor area. You may not see this if your browser theme has too much corner rounding
    • Formatting - You can use the formatting buttons at the top right to insert special tags, or you can surround text that is highlighted.
    • Word Count - This, and other stats, are generated according to the rendered document not the source text, and can be found in the bottom-right
    • Exporting - You can export the source text as a .txt file, or the rendered document as an .HTML file. Right click the relevant option in the top-right and save it. You can also view it on it's own by right clicking and opening in a new tab.
    • Narrow Window - If you resize the window to be narrow, less than 600px, and have the preview open, it will display stacked with the editor on top and preview underneath.
    • Text Size - To make the text bigger, use the browser zoom function (Ctrl+-, Ctrl++)
    • Search - Use the search input in the notes panel to filter notes for certain words, and they will be highlighted if the note is open. This won't search the preview, you should use the Find (Ctrl+F, F3) function for that.
    • Return Panel to Normal - Close the Editor Tab
    • Drag to Attach Image - Drag an image from a webpage (only normal <img> tags work), or from a file explorer onto the attachment icon (šŸ“Ž paperclip), and it will be added as an attachment

    Bugs to be aware of

    • VERY IMPORTANT After closing the editor tab, close and re-open the notes panel in order to update the currently displayed note. Due to a quirk in how the vivaldi UI handles this, the editor is unable to update these. You changes have been saved, but they won't appear to be. If you edit this out of date note you will lose any changes you made. So close and re-open the notes panel. To protect against accidental erasing of notes, keep the markdown view on in the sidebar as this makes it read-only.
    • QUITE IMPORTANT Only have one editor tab open at once
    • QUITE IMPORTANT If you want to move the editor to a new window, close the tab and then re-open it the normal way in another window. DONT use vivaldi's "move this tab to a new window" function, or drag the editor tab into its own window.
    • QUITE IMPORTANT Don't press Refresh or Reload, or try to navigate to other links and then back. This will break the connection to the UI. If that does happen, just close and re-open the editor
    • Due to how the markdown renderer works, sometimes the line count is incorrect
    • You can rename the trash folder, but it doesn't save permanently
    • Sometimes the scroll sync can become out of sync. If anyone has any clue how to fix this, I would welcome suggestions.

    Last Words

    • If this is useful to you, please enjoy it
    • Let me know if there are any problems (I can't promise I'll fix it, but i'll try)
    • Let me know if there is anything else you think should be added (I can't promise i'll add it)

    A note to the vivaldi devs

    Hi, it took a bit of doing to get this working, but I'm quite please with the way vivaldi was able to stand up to it. In the (possibly very far) future, would it be possible to expose the following endpoints to the extension API?

    • vivaldi.notes.* - an excellent API that currently works exactly as I would expect it to, and would fit in nicely to the extension ecosystem behind a "notes" permission
    • vivaldi.notes.currentSelected() - Return the ID of the note currently selected in the sidebar. This way I wouldn't need to re-implement a notes tree if I wanted to use it.
    • vivaldi.notes.render.create() - Allow me to initialise a custom renderer without having to include the whole markdown library
    • vivaldi.theme.get() - Would make querying the current theme variables much easier if it could return the contents of the browser window's Hidden behind a "themes" permission.
    • vivaldi.panels.* - Allow me to get/show/hide the notes panel, hidden behind a "panels" permission. I wouldn't need to know webpanels, that could be separate permission.

    Update Log

    1. Automatic updates to word count, null & regex improvements as suggested by @iAN-CooG and added an icon
    2. Corrected line counting rule, make icon follow theme colours
    3. Slightly refactor, add font toggle and wrap toggle
    4. Full Rewrite, allowing for full page advanced editing & previewing
    5. Fix some bugs
    6. Fix on close bug
    7. Drag to attach image

  • That's a pretty cool mod.
    It's not immediately apparent that you have to click each time for a new count, and for that matter, where to click. It's not really a problem, but maybe a small button/icon would clarify this, instead of "(check word count") sentence and then just the count for the remainder of usage.

  • @lonm nice idea but it doesn't work very well for me, most of the times the click on the (check word count) doesn't trigger. If I press enough times enter to fill lines and then the scroll bar appear, click on them few times, then something happens clicking on the check count. Deleting the extra lines, the scroll bar disappears, the count now don't sense the new clicks anymore so don't update. Seems it needs a couple of lines at least to start sensing the clicks.
    I've tried with no other css or js mods, just this alone, to be sure there was no interference.

    EDIT: in console it shows an error
    Uncaught TypeError: Cannot read property 'length' of null
    at HTMLSpanElement.updateWordCount (custom.js:129)

    which for me is
    const words = notetext.match(/ /g).length + 1; <-

  • This is how I tried to fix it. Not understanding why the consts, I've used some vars instead, and conditioned them of being not null.
    Also the count of words is better replaced with a regexp to find any count of spaces followed by any count of non whitespace chars.

    function updateWordCount(){
        const wordcountspan = document.querySelector("#note-word-count");
        const notetextarea = document.querySelector("#notes-panel > div > div > textarea");
        if(wordcountspan === null || notetextarea===null){
            wordcountspan.textContent = "(check word count)";
        const notetext = notetextarea.value;
        const characters = notetext.length;
        var matchspace=notetext.match(/ *\S+/g);
        var words = 0;
        var lines = 0;
        if(matchspace === null) {
            if (characters>0) {
               words = 1;
        } else {
            words = matchspace.length;
        if(matchspace === null) {
            if (characters>0) {
                lines = 1;
        } else {
            lines = matchspace.length + 1;
        const message = "C: "+characters+" W: "+words+" L: "+lines;
        wordcountspan.textContent = message;

  • Moderator

    I've updated the original post with some fixes, and it can now auto-update the counting rather than relying on a click.

  • @lonm that's better, one more change to fix the lines counter

    const lines = lineMatches ? lineMatches.length+1 : (characters==0 ? 0 : 1);

    this way it's 0 if you delete all text, at least 1 for at least 1 char, and (number of CR found) +1, else it would be counting 1 even for 2 lines

    For my convenience I changed the
    so the icon is visible in both light and dark themes. I've no idea how to set it to the actual theme colors šŸ™‚

  • Moderator

    @ian-coog Good call on the line counting. I've also updated it to use the browser theme colour variables.

  • @lonm Nice, now that's perfect IMHO. It goes in my CustomCSS pack.

  • Thanks you. Awesome mod dude šŸ˜ƒ

  • Moderator

    I have updated to include new features - such as a font toggle and a word wrap toggle.

  • awesome mod. thanks man

  • Moderator

    I have updated the mod with a new version, the first post in this topic has all the details.

    Main new feature: Full page dual-column editor and previewer.

  • @lonm The editor interface seems to be messed up in Vivaldi 2.0.1309.37 Stable. Moreover, once I open the editor tab in a window, even after I close the editor tab and close and re-open the notes panel, note contents do not show up in the notes panel anymore, and I have to open a new window to get the notes panel working properly again.

  • Moderator

    @valiowk I've noticed some problems in 2.1 snapshots as well. I'll have to have another look at this.

  • Moderator

    I've pushed an update that fixes an issue where the notes tab wouldn't open after you close it.

  • Moderator

    Update 7: You can now drag images onto the attachment icon šŸ“Ž to add an attachment quickly.


  • I'm still encountering problems with the editor interface: see the screenshot. Any idea where the problem lies? Dragging image onto the attachment icon doesn't seem to work for me after replacing my files with your latest version.


  • Moderator


    • Have you definitely copied the .css files as well as the .js files?
    • If you open the browser console (vivaldi://inspect > Apps > Inspect Vivaldi > Console), do you see any messages starting with "BN"?

  • @LonM I definitely copied the .css as well as the .js files. I don't see any messages starting with "BN" if I open the browser console.

  • Moderator

    @valiowk It looks as though the common.css file isn't loading from the browser. When you installed the mod, where did you put it? I expect the structure of the vivaldi folder after installing the mod to look something like this:

    ā”œā”€ā”€ background-bundle.js
    ā”œā”€ā”€ background-common-bundle.js
    ā”œā”€ā”€ browser.html
    ā”œā”€ā”€ bundle.js
    ā”œā”€ā”€ style/
    ā”‚Ā Ā  ā”œā”€ā”€ common.css
    ā”‚Ā Ā  ā””ā”€ā”€ common.js
    ā”œā”€ā”€ user_modfiles/
    ā”‚Ā Ā  ā”œā”€ā”€ betterNotes.css
    ā”‚Ā Ā  ā”œā”€ā”€ betterNotesEditor.css
    ā”‚Ā Ā  ā”œā”€ā”€ betterNotesEditor.html
    ā”‚Ā Ā  ā”œā”€ā”€ betterNotesEditor.js
    ā”‚Ā Ā  ā”œā”€ā”€ betterNotesEditor.png
    ā”‚Ā Ā  ā””ā”€ā”€ betterNotes.js
    ā””ā”€ā”€ vendor-bundle.js

    I've omitted a few files and folders for clarity

    Does this match how you have mods installed?


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.