What is tldraw? Features, Use Cases, and Why It's Gaining Popularity
Fotographer AI, Inc.
Published :
February 29, 2024
Generative AI has been gaining significant attention recently and is steadily evolving toward practical applications.
In this article, we'll introduce "makereal" from tldraw, a tool that can automatically generate HTML code from created images and shapes.
By reading this, you'll gain an understanding of its features and capabilities, so please read to the end.
What is tldraw?
tldraw is essentially a free whiteboard-like tool.
You can utilize handwritten sketches and shapes, making it useful for creating prototypes (wireframes) for web page creation and more.
In terms of similar use cases, it's akin to tools like Figma.
Like PowerPoint or Google Slides, you can edit shapes by scaling, rotating, and more.
One of the main reasons tldraw has gained so much attention recently is its ability to generate HTML code from sketches and shapes in a matter of seconds.
Importantly, tldraw itself doesn't have built-in AI; rather, it leverages the OpenAI API, known for ChatGPT.
GPT-4V, which allows OpenAI to read diagrams and illustrations in addition to text, seems to be a major catalyst.
If you're interested in learning more about GPT-4V, check out the following article.
Read also: What is GPT-4V? What you can do with ChatGPT's new GPT-4V feature and its use cases
tldraw's Notable App: "makereal"
When you search for "tldraw," you'll likely encounter the term "makereal." makereal is an app within tldraw that allows you to generate HTML code from drawn shapes and illustrations.
As mentioned above, generating HTML code requires using the OpenAI GPT-4V API (paid), so keep that in mind.
However, it's characterized by a pay-as-you-go system (you only pay for what you use) rather than a monthly fee, making it relatively affordable to try.
Let's take a closer look at tldraw and makereal.
Why tldraw and makereal Are Gaining Attention
There are three main reasons why tldraw and makereal are gaining attention:
Anyone can easily generate images from handwritten illustrations and shapes
First, anyone can easily generate images from handwritten illustrations and shapes.
From my experience, the UI feels somewhat similar to the design tool "Figma."
With Japanese language support implemented, it feels quite user-friendly.
Also, the fact that you can use the tool itself for free is a welcome bonus.
Automatically generate HTML code for created images
Second, it can automatically generate HTML code for created images.
As mentioned several times already, this is a significant feature that many people associate with tldraw.
It combines the work of a designer who visualizes ideas and concepts into designs and an engineer who codes and implements programs, potentially reducing the workload to one person. This is a powerful tool for both company employees and freelancers.
OpenAI API key is used
Third, it uses the OpenAI API key.
Leveraging AI from OpenAI, the developer of the world-renowned ChatGPT, gives it a level of credibility and buzz that surpasses other AI tools.
Furthermore, with future updates expected for OpenAI's AI, the capabilities of tldraw are expected to continue expanding, making it a noteworthy point.
Next, for those who want to try tldraw and makereal, here's a simple guide on how to use it.
How to Use tldraw "makereal"
There are two ways to use tldraw "makereal": by obtaining the source code on GitHub and running it, or by using it from the official website.
This time, we'll focus on the simpler method: using it from the official website.
Steps to Using tldraw "makereal"
First, let's outline the necessary steps before you can use it.
[STEP1] Access the official website
Searching for "tldraw makereal" might lead you to the GitHub page, making it difficult to find the official website. Try clicking this URL (https://makereal.tldraw.com/).
[STEP2] Enter the OpenAI API key
Once you successfully access the website, you should see a space labeled "Your OpenAI API Key" at the bottom center of the screen. Enter your API key there.
*If you haven't obtained an API key yet, please refer to the following instructions on how to obtain and charge it.
[Extra Edition 1] How to Obtain an API Key
1. First, access the OpenAI site (platform.openai.com) and create an account.
2. Once you've successfully created an account, click the key icon (API keys) button on the left side of the screen.
3. Then, you'll see a "+Create new secret key" button in the middle of the screen. Click it, and the following popup will appear. Give it a name and press "Create secret key."
4. If successful, a randomly generated string will appear above the "+Create new secret key" button, along with the item "SECRET KEY." This string itself is called the API key.
[Extra Edition 2] How to Charge for API Usage
Next, to activate the API key, you need to charge your OpenAI account.
Think of it like loading cash onto a PASMO or Suica card.
1. Click the gear (Settings) button on the left side menu bar, then click the Billing button.
2. You can then enter your credit card information and charge your account with the desired amount.
*Please note that the currency will be converted to US dollars, not Japanese yen.
Once you've completed these steps, you're ready to go!
Next, let's look at the basic operation method.
Sketching
First, sketch the idea that will be the basis of your design.
You can handwrite, upload images, or use shapes in tldraw to draw.
Press the Make Real button to output HTML code
Once you've sketched, select the image you want to generate HTML code for and press the Make Real button in the upper right corner.
This will generate an image of how it would actually be implemented in HTML. Select "Copy HTML" in the menu bar on the right to copy the code.
Other features, such as fine-tuning with text, are also implemented, but this is just a basic guide. More detailed instructions, including those features, will be covered in another article.
That's the overview. Now, let's look at some examples of how it can be used.
Examples of tldraw "makereal" Applications
Streamlining wireframe creation
First, it streamlines wireframe creation.
Being able to generate a screen image on HTML with a single button, allowing you to think about the design with the final output in mind, is a particularly welcome point for web designers.
Utilization in Web Page Production Work
Second, it can be utilized in web page production work.
To implement a designed structure on the web, it used to be necessary to write code from scratch. However, with tldraw "makereal," you can generate code with a single button.
It feels like it will lead to innovative business efficiency improvements.
Use in game creation
Third, it can be used in game creation.
Not only can you create game screen interfaces, but some people have even used tldraw "makereal" to create computer games like Pac-Man.
The ability to use AI, including tldraw "makereal," is likely to be a major turning point for humanity in the future.
Finally, let's discuss usage fees and precautions.
tldraw and makereal Usage Fees
As mentioned at the beginning, tldraw itself is free to use.
However, makereal requires payment due to its use of the OpenAI API key.
Charges are made each time rather than automatically deducted, so you shouldn't overuse it, but keep that in mind.
As of February 2024, the OpenAI API usage fee is said to be $0.01 to $0.03 per use, so it seems relatively inexpensive to use.
Precautions for Using tldraw "makereal"
There are no particularly significant precautions to note, but remember that generating HTML code requires a fee, as mentioned above.
Creating an API key and charging it are separate things, so if you create an API key but it doesn't work, it's often because you forgot to charge it.
More detailed API Q&A is available on tldraw, so please check it if you have any problems.
API Keys Q&A
Conclusion
We introduced the features and capabilities of tldraw and makereal.
We hope this article has been helpful in your use of tldraw and makereal.
Thank you for reading to the end.
Design your Dreams, Magically.
An AI image synthesis tool that anyone can intuitively use in the browser.
