How to use Notepad in Browser with 1 line of Code

How to use Notepad in Browser with 1 line of Code

In this tutorial, we are going to learn about creating and using the browser as a notepad.

Creating the NotePad

  1. Open a new tab in your browser.
  2. Enter the below code and hit enter.
data:text/html,<body contenteditable>

This code will create a body element with its content is editable.

Now we can write our notes inside this tab.

creating-notepad

Adding Colors to our Notepad

Let’s add the colors to our notepad by using inline-css.

Now Open a new tab and enter the below code.

data:text/html,<body contenteditable style="background:black;color:gold;font-size:20px;">

This code will add a background color black, color: gold and font-size: 20px to body element.

adding to colors notepad

Adding a title to our Notepad

data:text/html,<title>Browser Notepad</title>
<body contenteditable style="background:black;color:gold;font-size:20px;">

adding title