TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: ~200 byte in-browser, no JS, private notepad

133 pointsby jannekloumanabout 7 years ago

18 comments

jannekloumanabout 7 years ago
I wanted a place where I could write down my thoughts without them being stored in the cloud or connected to an account (notes, onenote, evernote, docs, paper, gist, etc). I don&#x27;t really like terminal text editors, notepad, or IDEs for writing, so I made this very simple notepad. It&#x27;s a &lt;body&gt; html tag with the contenteditable attribute making it editable, and some &lt;style&gt;.<p>To save a note just store it on disk (cmd&#x2F;ctrl+s). To add images, drag and drop them onto the text area. Remove the contenteditable attribute from &lt;body&gt;, save, and voila, you now have a static lightweight blog post ready to be published! Formatting can be a bit wonky but should work in some browsers (cmd&#x2F;ctrl+b&#x2F;i&#x2F;u). Copy+pasting formatted text can potentially break things a bit.<p>The two colors are from Solarized. Feel free to download the file and update style&#x2F;markup to your preference.<p>Some ideas&#x2F;variations:<p>Dark theme: <a href="https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;dark.html" rel="nofollow">https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;dark.html</a><p>Serif: <a href="https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;serif.html" rel="nofollow">https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;serif.html</a><p>HN theme: <a href="https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;hn.html" rel="nofollow">https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;hn.html</a><p>With heading: <a href="https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;with-heading.html" rel="nofollow">https:&#x2F;&#x2F;jjjjjjjjjjjjjjjjjjjj.github.io&#x2F;new-note&#x2F;with-heading...</a>
评论 #17004922 未加载
评论 #17004850 未加载
评论 #17003414 未加载
评论 #17005060 未加载
评论 #17004819 未加载
评论 #17004788 未加载
评论 #17004853 未加载
napsterbrabout 7 years ago
You can always type `data:text&#x2F;html, &lt;html contenteditable&gt;` on your browser :)
评论 #17004896 未加载
评论 #17005040 未加载
评论 #17005440 未加载
iforgotpasswordabout 7 years ago
You should make this an electron app so I have a lightweight text editor at hand even when I&#x27;m offline.
评论 #17005675 未加载
评论 #17005770 未加载
rehemiauabout 7 years ago
Litewrite[1] is a great notepad that does save notes to browser localstorage, and has a syncing feature (you can sync through Dropbox, Google Drive or any RemoteStorage provider)<p>[1] <a href="https:&#x2F;&#x2F;litewrite.net&#x2F;" rel="nofollow">https:&#x2F;&#x2F;litewrite.net&#x2F;</a>
评论 #17005431 未加载
quickthrower2about 7 years ago
It&#x27;s a nice idea, but what is the advantage over windows notepad (or equivalent on other OSes)?
评论 #17005670 未加载
评论 #17004784 未加载
评论 #17004949 未加载
NVRMabout 7 years ago
How can this be so upvoted. This is crazy.
Sawamaraabout 7 years ago
This is literally an empty page with a contenteditable tag snapped on the body. I mean.... yeah, it can be done.
foucabout 7 years ago
Note to others: click on the screen and you&#x27;ll see a cursor.
mettamageabout 7 years ago
From this idea I decided to type &quot;no javascript&quot; in the HN search bar. There are some interesting things in there.
cup-of-teaabout 7 years ago
A Web browser is not more lightweight that notepad.
评论 #17005797 未加载
评论 #17006028 未加载
xemabout 7 years ago
For the record, here&#x27;s the smallest notepad with local persistence we&#x27;ve golfed in JS: <a href="http:&#x2F;&#x2F;xem.github.io&#x2F;postit&#x2F;" rel="nofollow">http:&#x2F;&#x2F;xem.github.io&#x2F;postit&#x2F;</a> (github: <a href="https:&#x2F;&#x2F;github.com&#x2F;xem&#x2F;postit&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;xem&#x2F;postit&#x2F;</a>)
Vinnlabout 7 years ago
Perhaps also interesting for people who like this: Firefox Notes.<p><a href="https:&#x2F;&#x2F;testpilot.firefox.com&#x2F;experiments&#x2F;notes" rel="nofollow">https:&#x2F;&#x2F;testpilot.firefox.com&#x2F;experiments&#x2F;notes</a>
评论 #17005866 未加载
thinkxlabout 7 years ago
old thread about the same with good examples: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6005295" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6005295</a>
awakeabout 7 years ago
<a href="https:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;OZxqMo?editors=1000" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;anon&#x2F;pen&#x2F;OZxqMo?editors=1000</a> sublime text with vim and drag and drop files and tabs. why? why not? idk.
awakeabout 7 years ago
more examples in this thread <a href="https:&#x2F;&#x2F;coderwall.com&#x2F;p&#x2F;lhsrcq&#x2F;one-line-browser-notepad" rel="nofollow">https:&#x2F;&#x2F;coderwall.com&#x2F;p&#x2F;lhsrcq&#x2F;one-line-browser-notepad</a>
amitmerchantabout 7 years ago
I&#x27;ve also built something similar in past, which is also a PWA which works offline(and quite minimalistic): <a href="https:&#x2F;&#x2F;notepad.js.org" rel="nofollow">https:&#x2F;&#x2F;notepad.js.org</a>
equaluniqueabout 7 years ago
Neat - although scrolling doesn&#x27;t seem to work for me.
tzaholaabout 7 years ago
I think this really shows how powerful Web technologies are! Think about it: you get a full-fledged editor, with image embedding, and it only takes 200 <i>bytes</i>. Not kilobytes or megabytes, just bytes. Now check Evernote in the AppStore which weighs in at 111.5 <i>megabytes</i>.<p>If you’re still writing native apps in 2018, you’re throwing money right out of the window and you deserve bankruptcy.
评论 #17006917 未加载