lhsrcq

One line browser notepad

Introduction

Sometimes I just need to type garbage. Just to clear out my mind. Using editors to type such gibberish annoys me because it clutters my project workspace (I'm picky, I know).

So I do this. Since I live in the browser, I just open a new tab and type in the url tab.

data:text/html, <html contenteditable>

Voila, browser notepad.

Why it works?

You don't need to remember it. It's not rocket science. We are using the Data URI's format and telling the browser to render an html (try "javascript:alert('Bazinga');"). The content of said html is a simple html line with the html5 attribute contenteditable. This works only on modern browsers that understand this attribute. Click and type!

Sign in or sign up to add your response.

110 Responses

2232

This is great. Made a bookmark from it.

over 1 year ago ·
3197
31474fc2498303a486f57d623fabdc89

You can use textarea and make it "invisible" if you want autofocus.

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
over 1 year ago ·
3200

I'm making it as my default page from now on. :) Thanks for the tip.

over 1 year ago ·
3257
E3ffbe22fb80d4dd9e350dc6363b1c97 2

This is very clever; I dig it. Thanks for the tip!

over 1 year ago ·
3475
Avatar

Really cool! :D

over 1 year ago ·
3515
A404d3280b6226449ddade0b1db4e271

I made a version that is a full blown Ruby editor with syntax highlighting from Ace.

https://gist.github.com/4666256

over 1 year ago ·
3517
Me 180x180

@jakeonrails Quoting @jessereese01, this is very clever, I dig it. Smallest html5/css/js editor competition anyone?

over 1 year ago ·
3519

I'm going to use the hell out of this. thanks.

over 1 year ago ·
3520
7efdcfb17d939bf43d6e2e06568c9de2

Reminds me of how you could do this in IE (up to 6 at least; last version I tried) by using about:html here

I missed this feature a lot and am very happy I can just have html render on the fly again!

over 1 year ago ·
3521

Forgive me for the shameless plug, but thought this might be useful for others. I put together a little project that uses the browsers localstorage so you can jot notes down and come back to them at http://a5.gg

over 1 year ago ·
3522
187639d18e6dbe73c3d0f14440b56aba

neat, but would be good if someone implemented some sort of dirty checking to prevent lost work by accidentally closing the tab.

over 1 year ago ·
3524
Ebff50c89ba9bb9a67d640470006ad88

do you know if there is a mobile safari version of iOS?

over 1 year ago ·
3525
5572003a2d29e47e0d8084ac35ba3a42

Here is a variation on the theme that changes the background color as you type:

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
over 1 year ago ·
3527
A208c6ddf9836a1e2a32a0dab0362713

Really cool, I liked @fvsch version, I just added a title so the text on the tab makes a bit more sense

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
over 1 year ago ·
3532
6a7c0d92f8bd76d56550bdc8ee1dd5f3

Fantastic.

over 1 year ago ·
3533
Addbe30af6bb60433c4cccadb84c215c

@bgrins that is strange. i like it :)

over 1 year ago ·
3538

for Safari browser too, base64 needed

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPg==

br

over 1 year ago ·
3539

This is fantastic, thanks for sharing

over 1 year ago ·
3540
87eab8870e6a86fc1ba3bf6e7fb19b60

Its really cool!

over 1 year ago ·
3541
848777102a63073bb23c7175bfeac864

Cool. Added the date
////data:text/html, <html contenteditable>

</p> <script> var d = new Date(); var x = document.getElementById("demo"); x.innerHTML=d.toDateString(); </script>
///

over 1 year ago ·
3542

tres' kuhl, very useful

over 1 year ago ·
3543

Cool! It's crazy. I love it.

over 1 year ago ·
3545
0ced396f695ff8b1843de9f6cfd42c0c

seems usefull.. .cool

over 1 year ago ·
3548
D592a9591198b6cc9b2f68d5547839d4

(My install of) Firefox defaults to ISO-8859-1, which turns non-iso-8859-1 characters to html entities when saving to a file. This version is more int'l friendly:

data:text/html;charset=utf-8, <html contenteditable></code>

over 1 year ago ·
3549

You're such a bunch of nerds ;-)

over 1 year ago ·
3550

Very cool. Bookmarked. Thanks.

over 1 year ago ·
3557

Hi, excellent article - and excellent discussion too.

I've combined several of the ideas above into the following :

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"></code></pre>

Features :

  • Nice layout : whitespace, bigger font, easier on eyes.

  • UTF-8 / international characters compatible

  • Titled tab

  • No spellcheck

It's still missing some big features though, for example :

  • localStorage : the code from 3lv_1 doesn't work, at least on Chrome.

This is critical and essential - it's like AutoSave. You can forget about saving, it's done automatically for you. Zero data loss.

http://a5.gg works & looks great, but you can't scroll (on Chrome) once there are more lines than screen space == showstopper

Once localStorage works, then I can start using this; will move my scratch pad from my Text Editor :)

Thanks again to everyone for this awesome thread.

over 1 year ago ·
3558
A06c38dd3377bbc0db360c44a2969fed

I've copied @sufehmi but added font-family: monaco and a H1

data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.
over 1 year ago ·
3559
B1454cb84ebce41722ae5898963664fe

Plus a favicon maybe:

data:text/html, <link rel="shortcut icon" href="http://g.etfv.co/http://www.sublimetext.com"/><html contenteditable>
over 1 year ago ·
3562

@oumu, yes, would be visually nice and faster to find in my bookmarks bar, anyone up for embedding favicon in base64 into 3lv1 version so fully local loading (i know will be cached from afar but.. the nerd power!)?
Edit.. @3lv
1, what browser does your code work in again? Can't make it play along in neither firefox nor chrome

over 1 year ago ·
3563

Nice!<br>
Also this works as a parameter in the 'target' field of a Windows shortcut. Eg:<br>
opera.exe "data:text/html, <html contenteditable>"</code>

But, how to open an existing text/html file into this 'browser acting as a text editor' mode?<br>
I've always wished browsers could flip back and forth between editing html source as plain text, and viewing it as formatted html.<br>
Seems there's hope of this yet.

over 1 year ago ·
3572
Default profile 5 normal

Nice trick ....... I am going to bookmark it .........

over 1 year ago ·
3574

it's cool.. thank you

over 1 year ago ·
3576

I made a bookmarklet that takes highlighted text on a web page and when you press the button then opens the new edit window with that text in it: http://ednortonengineeringsociety.blogspot.com/2013/01/cool-trick-with-contenteditable-in-html.html

over 1 year ago ·
3577

It's like typing on paper...

data:text/html, <html contenteditable><style>body{font-family:helvetica;font-size:15px;line-height:22px;color:#666;width:600px;margin:40px auto;background:#FFF;border:1px solid #DADADA;padding:50px; }</style>

over 1 year ago ·
3579
903078a8d6e9aca120b83cf4b3e86050

I added one which combines loads of the above, but makes it look like lined paper. So; includes autofocus, a favicon, a title, some basic styling for text and a nice css-only lined paper effect.

data:text/html;charset=utf-8, <title>TextEditor</title> <link rel="shortcut icon" href="http://g.etfv.co/https://docs.google.com"/> <style> html{height: 100%;} body{background: -webkit-linear-gradient(#f0f0f0, #fff); padding: 3%; height: 94%;} .paper { font: normal 12px/1.5 "Lucida Grande", arial, sans-serif; width: 50%; height: 80%; margin: 0 auto; padding: 6px 5px 4px 42px; position: relative; color: #444; line-height: 20px; border: 1px solid #d2d2d2; background: #fff; background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px; background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px; -webkit-background-size: 100% 20px; -moz-background-size: 100% 20px; -ms-background-size: 100% 20px; -o-background-size: 100% 20px; background-size: 100% 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.07); } .paper::before { content: ''; position: absolute; width: 4px; top: 0; left: 30px; bottom: 0; border: 1px solid; border-color: transparent #efe4e4; } textarea{display: block; width:94%;margin:0 auto;padding:3.8% 3%; border: none; outline: none; height: 94%; background: transparent; line-height: 20px;} </style> <body spellcheck="false"> <div class="paper"> <textarea autofocus="autofocus"></textarea> </div> </body> </html>

over 1 year ago ·
3580

@iamfriendly, yours does not work. It seems it is missing things.

over 1 year ago ·
3584
Eba3af4a2b4e7c4aa1558d997661a104

@iamfriendly: nice! but you forgot the body... Heres the fixed version:

http://pastebin.com/dpW1vwB8

over 1 year ago ·
3588
1a5d68137eb380c1258e518eed6964f1

AS A SIDE NOTE to the above in Firefox
1) Bookmark it on the tool bar
2) Edit the Properties for the book mark
3) Set the 'Load this bookmark on the sidebar'
4) Save

over 1 year ago ·
3591
903078a8d6e9aca120b83cf4b3e86050

Annoying, the comment must have got cut off. Mine uses a textarea rather than the body, here:

https://gist.github.com/4675347

over 1 year ago ·
3592
209062f5760f52ceb0a3520ca6fa173e

This is the better application of the data uri scheme:
data:text/html; base64, PHNjcmlwdD5sb2NhdGlvbi5ocmVmPSJodHRwOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9b0hnNVNKWVJIQTAiOzwvc2NyaXB0Pg==

over 1 year ago ·
3596
2249bda1e0ebd93ad6cc25172bb847dd

I went the textarea route so that I could add the ability to save the contents to a file http://pastebin.com/U8658H5c

over 1 year ago ·
3597

Wow! Works like a charm here in my Opera. Very kewl!

over 1 year ago ·
3599

Under windows at least in Chrome, Crtl B Crtl I and Crtl U work on highlighted text (Bold, Italic, Underline), and Crtl S will save for later retrieval - under what ever file name(s) you designate. Any one else know of any more Crtl sequences?

over 1 year ago ·
3602
D940dd93751cea6229c4b9b2098b7f39

Hm...seems Chrome throws security errors when trying to access localStorage from data-uri. Otherwise you'd just tack on:

<script>(function(b,l,k){b.innerHTML=l.getItem(k);b.addEventListener("keypress",function(e){l.setItem(k,b.innerHTML)},false)})(document.body,localStorage,"bkmlt.ntpd")</script>
over 1 year ago ·
3604
D940dd93751cea6229c4b9b2098b7f39

@paulnormannz whoa, font styles! ctrl+s doesn't actually save the content for me, just the blank datauri page.

over 1 year ago ·
3606

Like @zaus said, Chrome throws "SECURITY_ERR: DOM Exception 18" for localStorage. So, simply save the code into some HTML file. Here's a version with saving every time Enter is pressed:

<!DOCTYPE html><head><meta charset="utf-8"><title>TextEditorLocal</title><script>window.onload=function(){f1()}; 
function f1(){a=window.localStorage['e'];if(a) document.body.innerHTML=a};function f2(t,e){if(e.keyCode==13){window.localStorage['e']=t.innerHTML}}</script>
<body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;word-wrap:break-word;background:black;color:green;" spellcheck="false" onkeypress="f2(this,event);"></body></html>
over 1 year ago ·
3607
Cd3b70ed5998a15139eb9dcab36f3851

Just use opera, it has Notes window builtin

over 1 year ago ·
3609

Cool I did something similar a while back that gave you a live preview.

https://gist.github.com/1044282

over 1 year ago ·
3610

Instant Web Editor: http://editme.so

over 1 year ago ·
3615
Dsc 0105 0

Never saw 1000 votes protip before. This one worth it :)

over 1 year ago ·
3616

@zaus Ok, I'm using Chrome Version 26.0.1398.0 Canary, under Wondows Xp SP3

Actually this has taken of for us here for quickly gathering snippets - In Chrome Google Canary Open a tab as editor---from book mark- drag it off to other screen. Drag/ Copy and Paste into it snippets and useful stuff of other web pages (and their http://-s)

Crtl-S and save (as complete web page) some where (just a temp project folder). Fom bookmark make a new 'editor' page when needed rather than everything in one 'editor'.

When ready, use Sigil to import these pages (from temp project folder) into a new (or existing) ePub.

Create or make some lines into Headings <H1-6> then use Sigil's auto TOC maker, save as ePub for personal reference. (I'm using Cailbre for reading/organising ePub-s)

By opening the 'editor' Crtl-S-ed html files in Sigil, and not trying to just paste into Sigil (it uses webkit so almost responds well enough to Chrome copy/pastes), you'll get more of the original formatting images', tables' placements etc... that's where this simple in browser editor is so useful in gathering snippets and saving to disk - for those that works for :)

https://code.google.com/p/sigil/
http://calibre-ebook.com

over 1 year ago ·
3617
E04fb0aed034ea8b8400040cf8000a9e

I guess I'm late to the game but here's my 15 minute hack for persistent notes using local storage: http://samhuri.net/f/note.html

over 1 year ago ·
3618
0dc4a152ae0aab054dad72fbd491dc13

I hope that I am not too late. I created a chrome extension: https://chrome.google.com/webstore/detail/editor-in-chrome/kekmncaadcnnngadocpbcfaaaldklmnd

over 1 year ago ·
3621

My faith in humanity is restored!

over 1 year ago ·
3681

I love the code that displays the save button and launches a save dialog. But the save dialog (at least with FF) doesn't allow the file to be saved as anything other than an 8 character name followed by the "part" extension, and it only saves to the default download location.

Is there any way to call the 'save.as' dialog where the file name, extension, and location may be selected by the user? If so, it would make a great tool even better.

Thanks in advance,
Andrew

PS: And will it work in IE? If so, how, as I'm not getting it.

over 1 year ago ·
3690

@terrahertz firefox already gives you the ability to edit HTML of a page on the fly. I just did it now on this page and edited some text via HTML and viewed the changes. It's called "Inspect" and it's under the Web Developer menu. Control-Shift-I is the shortcut. cheers.

over 1 year ago ·
3737
45f4667e67e2196ad16be83d3f6793e5

trivia: it works because of our loved hated IE, it was first implemented in IE (in a bugged weird way), than firefox simplified it, then chrome implemented and then html5 made it a standard. awesome!

over 1 year ago ·
3758

The best ideas are usually the simplest.... so long TextEdit!!

over 1 year ago ·
3822

Took the best bits (IMHO) from all the code above:
- Paper styling.
- Auto focus.
- No TextEdit field (so Ctrl+S works).
- Fav icon from google docs.
- Slightly larger font.
- Spell checking on (easy to turn off if you like)

http://pastebin.com/rqLd7TdK

over 1 year ago ·
3962

My own contribution:

data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %233a3; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="wake up Neo..." />
over 1 year ago ·
4059
6be4e636e8aacd405bed5cd15124a875

@iconify awesome job!

over 1 year ago ·
4190
110fc5fd2fcd647658a5170f922a3a15

this is brilliant !

over 1 year ago ·
4286

@chinchang Thanks. Perfect use case for that, I think. :-)

over 1 year ago ·
4355
210eb8caf10e4769d6f4e4e48e18e499

With the same idea in mind I've developed this notepad http://memo-pad.appspot.com

over 1 year ago ·
4464

my autofocus bookmark:

data:text/html, <html contenteditable> <script>document.documentElement.focus();</script>

over 1 year ago ·
4706
0dc4a152ae0aab054dad72fbd491dc13

Now we have Slim Text: http://slimtext.org

It has lots of features. And it can even save files to your disk!

over 1 year ago ·
5459

@iconify Well done! Very nice! =D

over 1 year ago ·
5460

@sjg999 Thanks.

over 1 year ago ·
6335

so cool

over 1 year ago ·
6569
Drupal logo 1

@jasecoop I actually use http://a5.gg/ every day for taking quick notes and keeping track of my timesheet. Thanks!

over 1 year ago ·
6585
Profil milosmatic

Awesome!

over 1 year ago ·
6722
Cs ava

Great thread!

over 1 year ago ·
6940
Fa1ad3136f02cd9634753b88b86473a1

pretty... pretty... pretty... pretty.... pretty good.

over 1 year ago ·
6951
F700694ebf2911ddfcb0d25c5e0a97b1

This is awesome, since everybody's throwing their hats into the ring, here's the short version of my notepad app:

<!doctype html>
<meta charset="utf-8">
<title>html5 notepad</title>
<textarea></textarea>
<script>
var n = document.getElementsByTagName('textarea')[0];
n.onchange = function(){localStorage.setItem("n",n.value);}
n.value = localStorage.getItem("n");
</script>

it uses localStorage, so it needs to be hosted, but that means it'll save your notes between visits... I have the long version of my simple html5 notepad app, which is a little beefier code-wise (there's a polyfil & css), but still butt-simple.

over 1 year ago ·
7735
063415d49353f3d657642fa3ad5a4904

I made my own notes system using cookies a few months ago : http://romain.parage.free.fr/notes/
You can add a note with right click

over 1 year ago ·
7789
94bea9dfe7bb73ce7831a6967767f612

thanks...

over 1 year ago ·
7856
38fac07694b5d75005e507607e502634

jajaja nice trip.

over 1 year ago ·
7859
C88f05581326e914aab40028a0d8bbe0

My 2cents!
Awesome bookmarklet, from a marklet lover =)


data:text/html;base64,PHRpdGxlPkZsYXRwYWQ8L3RpdGxlPjxodG1sIHN0eWxlPSJmb250LWZhbWlseTogJ1JvYm90bycsIHNhbnMtc2VyaWY7YmFja2dyb3VuZDogIzFBQkM5QztwYWRkaW5nLXRvcDo1MHB4OyI+PGhlYWQ+PGxpbmsgaHJlZj0naHR0cDovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9Um9ib3RvJyByZWw9J3N0eWxlc2hlZXQnIHR5cGU9J3RleHQvY3NzJz48L2hlYWQ+PGJvZHkgY29udGVudGVkaXRhYmxlIHN0eWxlPSJtYXgtd2lkdGg6NjByZW07bWFyZ2luOjAgYXV0bztwYWRkaW5nOjRyZW07YmFja2dyb3VuZDojZmZmO2JvcmRlcjojNjY2IHNvbGlkIDFweDtib3gtc2hhZG93OiAxcHggNHB4IDhweCAtNHB4O21pbi1oZWlnaHQ6IDUwMHB4OyI+PC9ib2R5PjwvaHRtbD4gIA==
</code>

PS: sorry for the overflow =|

over 1 year ago ·
9095

really nice!

over 1 year ago ·
9421
B25a5e100b18615d65a25a2fc97ceb41

Awesome!
Minimal notepad editor, and it is easily forkable, customizable, ...
Thanks!
/DaniSanti.com

over 1 year ago ·
9535
Portrait

so so brilliant, just make it simple and stupid, finally i bookmark my black and white verion :->

data:text/html; charset=utf-8, <style>html,body{margin:0; padding:0;}</style><textarea style="font-size:2em; font-family: source code pro; line-height:1.5em; background:18191A; color:azure; width:100%; height:100%; border:none; outline:none;margin:0;padding:150px;" autofocus placeholder="wake up mo..." spellcheck="false" />
over 1 year ago ·
10102

Has anybody tried this on a Chromebook?

over 1 year ago ·
10131
519fb76548875.preview 620

Brilliant! No more extensions needed. Thanks :)

over 1 year ago ·
10284
E14d18f54cdabd8dfaa8f80b76b86438

Wow, great post!

over 1 year ago ·
10439
0bdadb775ff0d0c56f86a5bd243e9c77

Great shit, thanks)

over 1 year ago ·
10672
Amol 2009 02 22 023 thumb small

I prefer http://knotable.com for obvious reasons

over 1 year ago ·
11486
5a4ae49890c55068119f06451cb21a8c

Good tip!

I made a version for Javascript editor with ACE, as @jakeonrails did: in particular it lets you to execute the written code through CTRL + SHIFT + Y shortcut.

https://gist.github.com/wilk/7908404

over 1 year ago ·
11659
E78a6074533496ae57c01179e322aad8

Awesome. Love it. Thanks. <3

over 1 year ago ·
11903
E

Here is mine http://pastebin.com/0jdqrPyk

Save it as htm file somewhere.

Click on top left + to add note above current note.

Click on bottom left + to add note under current note.

Click x on the right to delete the note.

Save to localstorage with CTRL+S or CMD+S on mac.

When the notes are not save the background is red and the page title is "Unsaved"

over 1 year ago ·
12521
54bc1d2b746169ee506b553b218b18aa

I have created a styled version using localStorage which has the ability to download the contents.

https://gist.github.com/nunull/8807030

over 1 year ago ·
12894
My face

awesome stuff. thanks!

over 1 year ago ·
13741
Or

Noscript disable that by default:

javascript: and data: URIs typed or pasted in the address bar are disabled to prevent social engineering attacks.
Developers can enable them for testing purposes by toggling the "noscript.allowURLBarJS" preference.

over 1 year ago ·
13998
1cc0a6c0057e5bbf6217d926b7267df5

This is awesome, when you have something like a Chromebook

over 1 year ago ·
13999
1cc0a6c0057e5bbf6217d926b7267df5

This is awesome, when you have something like a Chromebook

over 1 year ago ·
15159
0 6h28ifghnu49bb n62fpissn9mgclxgnxu40iughd0wfv8zqeapus2d64njhqiizfiay2iiikywi

Very Nice and useful for writing notes in emergency when working/browsing webpages...

over 1 year ago ·
15273
Default profile 0 normal

This is fantastic.
Anyone know how to turn this into a Chrome extension, or to at least pin to the taskbar?

over 1 year ago ·
15275
298d7191d2182b6a88eff7f66fb9deb8 normal

try algolint.com I tried to make it simple, yet powerful. Its a simple code compile and collection tool. Give it a try

over 1 year ago ·
15598
976ea749f65929ca847daf14778cf685

jecxjo's version is awesome! http://pastebin.com/U8658H5c

i gave it a black background. but is there a way to make the page body around the text area also black?

over 1 year ago ·
15635
1252d92e0ad23567da5e7e84fe208e8a

Superb...........

over 1 year ago ·
15799
470723 4519376499564 577740388 o

www.typehere.co is a good alternative, also has some kind of localstorage.

over 1 year ago ·
15801
A07abb5f3be907c3c567666cfcfc8632

Just wow! Thanks for sharing, it's really something new for me. ;)

over 1 year ago ·
16363
0 w1fpi26yr4eq1 xqi9afi7bpmmyil5vqwqr imf2qserm3cnlz0rsapgbapq cn4erdg2djzlyj2

Cool~

over 1 year ago ·
17387
Ahplpseqteujait28407uxv7gqvcy755kaig6hqyqrv6

Cool

over 1 year ago ·
17558
0 lwfcfpvvnh pbqyclmalfrumnil 5ldc1erjfrpwwa5gstvbjs0mwkebs5ad6g2rkedyhbcethh4

super-simple, but here's one w/ a text area on the left for taking text notes & an image paste-pad on the right, handy for pasting images, etc....


data:text/html, <html style="font-weight: bold; font-family:Georgia; background:rgb(108, 108, 29); font-size:20px;padding:15px;" contenteditable><title>JD NOTEPAD</title><body><div style="width:49%;float:left;"><textarea style="width:99%; height:99%;padding:20px;border: 10px solid darkseagreen;">TEXT NOTEPAD....</textarea></div><div style="border: 10px solid darkseagreen;width: 49%;height: 97%;position: relative;left: 50%;">

IMAGE PASTEPAD...<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p></div></body>

</pre>

over 1 year ago ·
18303
Vpetkov profile small

This is great. Really clever. Unfortunately they dropped keyboard input in fullscreen.
In Safari you can no longer pass Element.ALLOWKEYBOARDINPUT to webkitRequestFullScreen -> https://fullscreen.spec.whatwg.org

over 1 year ago ·
21175
None

太厉害啦!

12 months ago ·
21950
Image

Anyone know how to support markdown rendering like iA Writer with this?

10 months ago ·
22683
Aalaap filter 512

I made a version of this with a monospace font and also a placeholder, so you can write code or a movie script in it!

data:text/html, <textarea placeholder="just start typing..." style="font-family: monospace; font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />

8 months ago ·
27497

This was an amazing idea. Not sure of it usefulness, but the creativity in it is outstanding!

about 1 month ago ·