7 Best Wysiwyg Html Editor Open Source

WYSIWYG HTML editor has several advantages over the text-based editors. To start with, you can build a website with WYSIWYG editors even if you don’t know how to code. All you have to do is drag and drop items in the editor and once you are done, just copy the code. However, finding a good open source WYSIWYG HTML editor can be a chore. This is where we come in. Also Read: 50+ Open Source Android Apps When You Want to Ditch Google

Best WYSIWYG HTML Editor Open Source

1. Pell

Pell is probably the smallest and simplest WYSIWYG editor that you will ever come across. It is literally 1.38 kb in size! It offers all the basic functionalities and formats like headings, bold, italic, lists, quotes, links, and images. Other available actions include indentation, superscripts, subscripts, and font name and size. After you are done writing and formatting with Pell, it will output the whole HTML code which you can then simply copy and paste on your website or page and you’re good to go.

Pros:

Smallest and lightest WYSIWYG No dependencies Easily customizable

Cons:

No fancy HTML editing Images only through links

Verdict: Considering its size, Pell makes a compelling package. But let’s be honest, you can only get basic HTML files done with the limited editing options. So, if you are someone looking for a fast and light-weight WYSIWYG editor that’s open source for some very basic work, definitely check out Pell. Get Pell

2. OpenWYSIWYG

OpenWYSIWYG is a cross-browser rich-text HTML editor coded entirely in JavaScript. By just copy-pasting a few lines of code, you can turn any into OpenWYSIWYG’s robust WYSIWYG HTML editor. The UI and editing options with the drop-down menus are very similar to that of any text editor and you will feel right at home. Apart from all the basic formatting options, OpenWYSIWYG boasts of an enhanced color picker with 216 web colors to choose from and a powerful table formatting tool with every option you could think of. Another great thing about OpenWYSIWYG is that along with all the visual options, you can still view raw HTML code and make adjustments directly in the code. Useful for when you want to learn or refresh your coding skills.</p> <p>Pros:</p> <p>Powerful editing environment Intuitive and easy UI Color picker and extensive table editing options</p> <p>Cons:</p> <p>Not updated in a few years</p> <p>Verdict: Being written in JavaScript, OpenWYSIWYG HTML editor open source should work with any other web programming language. If you are looking for something a little more powerful than Pell to incorporate in your web application, this is a great option. Get OpenWYSIWYG</p> <h3 id="3-tinymce-community-edition">3. TinyMCE (Community Edition)<a hidden class="anchor" aria-hidden="true" href="#3-tinymce-community-edition">#</a></h3> <p>The next open source HTML WYSIWYG editor on our list is TinyMCE. It is also completely written in JavaScript and offers a UI and experience like most word processors. That makes it more user-friendly. TinyMCE is not free, but the Community Edition being the free and open-source one. It comes with all the basic editing options like formatting text, lists, tables and also some image editing options. The developers have kept the pricing of the premium models according to the number of users. Some of the premium features include Google Drive and Microsoft Azure support, extensions, spell and link checker, and technical support.</p> <p>Pros:</p> <p>Extension support File management Technical support IDE-style code editor for HTML</p> <p>Cons:</p> <p>Pricey Not fully open source</p> <p>Verdict: TinyMCE with its easy integration option, user-friendly UI and plethora of features, is a complete package. If you just want the most feature-rich WYSIWYG HTML editor open source and are okay with spending some money, TinyMCE is the way to go. Also, they offer a one month free trial for their Pro model which you can always check out. Get TinyMCE Demo</p> <h3 id="4-jodit">4. Jodit<a hidden class="anchor" aria-hidden="true" href="#4-jodit">#</a></h3> <p>Jodit is another fast and lightweight WYSIWYG HTML editor open source editor that you can embed in your code and start editing your page. It is quite light at around 100 KB in size and has been written completely in TypeScript. That’s why you don’t need any dependencies or libraries to run it. It comes with a drag-n-drop interface for the image too. You can also attach YouTube or Vimeo videos via a link or embed them. The best thing I like about Jodit is that it comes with an ACE editor out of the box and with a single button, you can switch between the actual code and the preview mode.</p> <p>Pros:</p> <p>Lightweight, no libraries Drag-n-drop ACE editor out of the box Technical support (Paid)</p> <p>Verdict: Jodit offers the best of both the worlds – easy visual WYSIWYG editor as well as editing raw code. If you are someone who has at least some knowledge in HTML, Jodit might be the best option for you. Get Jodit Playground</p> <h3 id="5-summernote">5. Summernote<a hidden class="anchor" aria-hidden="true" href="#5-summernote">#</a></h3> <p>Summernote is a super simple WYSIWYG editor open source built on jQuery and based on Bootstrap. Since it supports Bootstrap, you can use all the supported styles and themes on your editor from Bootswatch. The WYSIWYG HTML editor open source itself has a very clean and minimal UI and you can even edit out or add formatting options according to your need. With Summernote’s Air-mode, you can hide the whole toolbar and edit your document on the fly. Convenient. It can also automatically convert all images to base64, so you do not have to do image handling at all. To me, the best part about Summernote is the hardworking team of developers behind it who are always listening to the community and adding new features. Examples include support for plugins and a lite or vanilla version of Summernote which doesn’t require Bootstrap.</p> <p>Pros:</p> <p>Minimum learning curve Air Mode for on the fly editing Supports Bootstrap 3.x.x to 4.x.x View and edit in HTML</p> <p>Cons:</p> <p>Requires Bootstrap</p> <p>Verdict: Summernote is probably the most feature-rich but free and open source WYSIWYG HTML editor available in the market and it is constantly improving. If you are working with Bootstrap, then Summernote is a no brainer but even if you aren’t, Summernote deserves to be checked out. Get Summernote Demo</p> <h3 id="6froala">6. Froala<a hidden class="anchor" aria-hidden="true" href="#6froala">#</a></h3> <p>Froala is a beautiful WYSIWYG HTML editor open source written in JavaScript. It is one of the more popular tools on this list and its popularity with developers can be attributed to its easy integration and clean design. Froala is a very powerful editor in itself and the wide myriad of plugins have only increased the same. Some of them include an advanced image editor, emoticons, spell checker, and it’s easy to even create your own plugin. All the tools can also be accessed with the inline editor which is extremely convenient. Like TinyMCE, Froala is available in a lot of flavors, but even the free version packs plenty of punch. The only difference is that you won’t be getting the full source code and technical support.</p> <p>Pros:</p> <p>Lightweight powerful editor Inline editing Plethora of plugins</p> <p>Cons:</p> <p>Not great for mobile hybrid app/website</p> <p>Verdict: Froala is fast and lightweight with a beautiful UI but still manages to bring all the features one might be looking for in a WYSIWYG HTML editor. If you are okay without the source code and support, the free version will serve you just fine, else you know what to do. Get Froala</p> <h3 id="7-ckeditor">7. CKEditor<a hidden class="anchor" aria-hidden="true" href="#7-ckeditor">#</a></h3> <p>CKEditor is extremely popular with users for being a beautifully designed WYSIWYG HTML editor open source. It comes with over 21k tests to help you learn HTML in a friendly layout. Detailed documentation is there to help you further hone your skills. Some of the biggest names in the tech industry trust it. Note that you will have to keep the copyright notices in each file intact and not delete the LICENSE.md file located in the CKEditor installation folder. That’s not a drawback, especially when you are getting so much value in return. There is support for plugins, @mention, emojis, legacy browsers, and even autocomplete which can save a lot of time.</p> <p>Pros:</p> <p>Detailed documentation, tests, questions Collaborate and @mention Autocomplete</p> <p>Cons:</p> <p>Keep license file</p> <p>Get CKEditor Honorary mentions: 1. MediumEditor is an open source clone of the inline WYSIWYG editor for Medium.com. It is dead simple, lightweight and comes without any dependencies. Although it is not that powerful, it could function as a great inline editing tool for text or text related documents. 2. Atom’s HTML Preview package allows you to add a preview pane in which you can have a live preview of your HTML code, which can be very helpful for developers. While this is definitely not for beginners, it’s a great package to add to your existing workflow if you already do programming in HTML.</p> <h3 id="best-wysiwyg-html-editor-open-source-1">Best WYSIWYG HTML Editor Open Source<a hidden class="anchor" aria-hidden="true" href="#best-wysiwyg-html-editor-open-source-1">#</a></h3> <p>While HTML is still the more powerful way of building a website and much more intricate stuff is possible with it, WYSIWYG editors have secured a place of their own. Learning to code requires a lot of investment of time and energy and might not make sense for everyone. If you have prior experience in programming and no time to learn, you can absolutely get away by using a WYSIWYG HTML editor open source. Also Read: 7 Best Open Source Browser for Android (2018)</p> </div> <footer class="post-footer"> <ul class="post-tags"> </ul> <nav class="paginav"> <a class="prev" href="https://techwiser.pages.dev/posts/7-best-ways-to-turn-off-camera-and-screenshot-sound-on-iphone/"> <span class="title">« Prev</span> <br> <span>7 Best Ways To Turn Off Camera And Screenshot Sound On Iphone</span> </a> <a class="next" href="https://techwiser.pages.dev/posts/7-ways-to-fix-android-12-scrolling-screenshot-not-working/"> <span class="title">Next »</span> <br> <span>7 Ways To Fix Android 12 Scrolling Screenshot Not Working</span> </a> </nav> <div class="share-buttons"> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on twitter" href="https://twitter.com/intent/tweet/?text=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source&url=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f&hashtags="> <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor"> <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-253.927,424.544c135.939,0 210.268,-112.643 210.268,-210.268c0,-3.218 0,-6.437 -0.153,-9.502c14.406,-10.421 26.973,-23.448 36.935,-38.314c-13.18,5.824 -27.433,9.809 -42.452,11.648c15.326,-9.196 26.973,-23.602 32.49,-40.92c-14.252,8.429 -30.038,14.56 -46.896,17.931c-13.487,-14.406 -32.644,-23.295 -53.946,-23.295c-40.767,0 -73.87,33.104 -73.87,73.87c0,5.824 0.613,11.494 1.992,16.858c-61.456,-3.065 -115.862,-32.49 -152.337,-77.241c-6.284,10.881 -9.962,23.601 -9.962,37.088c0,25.594 13.027,48.276 32.95,61.456c-12.107,-0.307 -23.448,-3.678 -33.41,-9.196l0,0.92c0,35.862 25.441,65.594 59.311,72.49c-6.13,1.686 -12.72,2.606 -19.464,2.606c-4.751,0 -9.348,-0.46 -13.946,-1.38c9.349,29.426 36.628,50.728 68.965,51.341c-25.287,19.771 -57.164,31.571 -91.8,31.571c-5.977,0 -11.801,-0.306 -17.625,-1.073c32.337,21.15 71.264,33.41 112.95,33.41Z" /> </svg> </a> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f&title=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source&summary=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source&source=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f"> <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor"> <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" /> </svg> </a> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on reddit" href="https://reddit.com/submit?url=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f&title=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source"> <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor"> <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-3.446,265.638c0,-22.964 -18.616,-41.58 -41.58,-41.58c-11.211,0 -21.361,4.457 -28.841,11.666c-28.424,-20.508 -67.586,-33.757 -111.204,-35.278l18.941,-89.121l61.884,13.157c0.756,15.734 13.642,28.29 29.56,28.29c16.407,0 29.706,-13.299 29.706,-29.701c0,-16.403 -13.299,-29.702 -29.706,-29.702c-11.666,0 -21.657,6.792 -26.515,16.578l-69.105,-14.69c-1.922,-0.418 -3.939,-0.042 -5.585,1.036c-1.658,1.073 -2.811,2.761 -3.224,4.686l-21.152,99.438c-44.258,1.228 -84.046,14.494 -112.837,35.232c-7.468,-7.164 -17.589,-11.591 -28.757,-11.591c-22.965,0 -41.585,18.616 -41.585,41.58c0,16.896 10.095,31.41 24.568,37.918c-0.639,4.135 -0.99,8.328 -0.99,12.576c0,63.977 74.469,115.836 166.33,115.836c91.861,0 166.334,-51.859 166.334,-115.836c0,-4.218 -0.347,-8.387 -0.977,-12.493c14.564,-6.47 24.735,-21.034 24.735,-38.001Zm-119.474,108.193c-20.27,20.241 -59.115,21.816 -70.534,21.816c-11.428,0 -50.277,-1.575 -70.522,-21.82c-3.007,-3.008 -3.007,-7.882 0,-10.889c3.003,-2.999 7.882,-3.003 10.885,0c12.777,12.781 40.11,17.317 59.637,17.317c19.522,0 46.86,-4.536 59.657,-17.321c3.016,-2.999 7.886,-2.995 10.885,0.008c3.008,3.011 3.003,7.882 -0.008,10.889Zm-5.23,-48.781c-16.373,0 -29.701,-13.324 -29.701,-29.698c0,-16.381 13.328,-29.714 29.701,-29.714c16.378,0 29.706,13.333 29.706,29.714c0,16.374 -13.328,29.698 -29.706,29.698Zm-160.386,-29.702c0,-16.381 13.328,-29.71 29.714,-29.71c16.369,0 29.689,13.329 29.689,29.71c0,16.373 -13.32,29.693 -29.689,29.693c-16.386,0 -29.714,-13.32 -29.714,-29.693Z" /> </svg> </a> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on facebook" href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f"> <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor"> <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" /> </svg> </a> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on whatsapp" href="https://api.whatsapp.com/send?text=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source%20-%20https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f"> <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" height="30px" width="30px" fill="currentColor"> <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-58.673,127.703c-33.842,-33.881 -78.847,-52.548 -126.798,-52.568c-98.799,0 -179.21,80.405 -179.249,179.234c-0.013,31.593 8.241,62.428 23.927,89.612l-25.429,92.884l95.021,-24.925c26.181,14.28 55.659,21.807 85.658,21.816l0.074,0c98.789,0 179.206,-80.413 179.247,-179.243c0.018,-47.895 -18.61,-92.93 -52.451,-126.81Zm-126.797,275.782l-0.06,0c-26.734,-0.01 -52.954,-7.193 -75.828,-20.767l-5.441,-3.229l-56.386,14.792l15.05,-54.977l-3.542,-5.637c-14.913,-23.72 -22.791,-51.136 -22.779,-79.287c0.033,-82.142 66.867,-148.971 149.046,-148.971c39.793,0.014 77.199,15.531 105.329,43.692c28.128,28.16 43.609,65.592 43.594,105.4c-0.034,82.149 -66.866,148.983 -148.983,148.984Zm81.721,-111.581c-4.479,-2.242 -26.499,-13.075 -30.604,-14.571c-4.105,-1.495 -7.091,-2.241 -10.077,2.241c-2.986,4.483 -11.569,14.572 -14.182,17.562c-2.612,2.988 -5.225,3.364 -9.703,1.12c-4.479,-2.241 -18.91,-6.97 -36.017,-22.23c-13.314,-11.876 -22.304,-26.542 -24.916,-31.026c-2.612,-4.484 -0.279,-6.908 1.963,-9.14c2.016,-2.007 4.48,-5.232 6.719,-7.847c2.24,-2.615 2.986,-4.484 4.479,-7.472c1.493,-2.99 0.747,-5.604 -0.374,-7.846c-1.119,-2.241 -10.077,-24.288 -13.809,-33.256c-3.635,-8.733 -7.327,-7.55 -10.077,-7.688c-2.609,-0.13 -5.598,-0.158 -8.583,-0.158c-2.986,0 -7.839,1.121 -11.944,5.604c-4.105,4.484 -15.675,15.32 -15.675,37.364c0,22.046 16.048,43.342 18.287,46.332c2.24,2.99 31.582,48.227 76.511,67.627c10.685,4.615 19.028,7.371 25.533,9.434c10.728,3.41 20.492,2.929 28.209,1.775c8.605,-1.285 26.499,-10.833 30.231,-21.295c3.732,-10.464 3.732,-19.431 2.612,-21.298c-1.119,-1.869 -4.105,-2.99 -8.583,-5.232Z" /> </svg> </a> <a target="_blank" rel="noopener noreferrer" aria-label="share 7 Best Wysiwyg Html Editor Open Source on telegram" href="https://telegram.me/share/url?text=7%20Best%20Wysiwyg%20Html%20Editor%20Open%20Source&url=https%3a%2f%2ftechwiser.pages.dev%2fposts%2f7-best-wysiwyg-html-editor-open-source%2f"> <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28" height="30px" width="30px" fill="currentColor"> <path d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" /> </svg> </a> </div> </footer> </article> </main> <footer class="footer"> <span>© 2023 <a href="https://techwiser.pages.dev/">techwiser</a></span> </footer> <script type='text/javascript' src='//monumentsmaterialeasel.com/cb/95/cc/cb95cc3ff359b5a20371cc544db4b60d.js'></script> <script type="text/javascript">var _Hasync= _Hasync|| []; _Hasync.push(['Histats.start', '1,4595848,4,0,0,0,00010000']); _Hasync.push(['Histats.fasi', '1']); _Hasync.push(['Histats.track_hits', '']); (function() { var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true; hs.src = ('//s10.histats.com/js15_as.js'); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs); })();</script> <noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4595848&101" alt="" border="0"></a></noscript> <a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor"> <path d="M12 6H0l6-6z" /> </svg> </a> <script> let menu = document.getElementById('menu') if (menu) { menu.scrollLeft = localStorage.getItem("menu-scroll-position"); menu.onscroll = function () { localStorage.setItem("menu-scroll-position", menu.scrollLeft); } } document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener("click", function (e) { e.preventDefault(); var id = this.getAttribute("href").substr(1); if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({ behavior: "smooth" }); } else { document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView(); } if (id === "top") { history.replaceState(null, null, " "); } else { history.pushState(null, null, `#${id}`); } }); }); </script> <script> var mybutton = document.getElementById("top-link"); window.onscroll = function () { if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) { mybutton.style.visibility = "visible"; mybutton.style.opacity = "1"; } else { mybutton.style.visibility = "hidden"; mybutton.style.opacity = "0"; } }; </script> <script> document.getElementById("theme-toggle").addEventListener("click", () => { if (document.body.className.includes("dark")) { document.body.classList.remove('dark'); localStorage.setItem("pref-theme", 'light'); } else { document.body.classList.add('dark'); localStorage.setItem("pref-theme", 'dark'); } }) </script> </body> </html>