Developing a typesetting gadget in He3 for three minutes
Published: 2023-05-31 17:39:42



As official website said in [He3](https://he3.app/), He3 is a < u > developer's toolbox < /u >, which contains many tools that developers need.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e17822i5xot9mohunknu.png)


![](https://he3.app/blogs/copywriting-correct/f177be64a651335c452afac51c6a6c70e24f09e5bf23d2ab2f6ae807f4bbfb3f.png)


Like uTools and Raycast, He3 also provides an < u > open system < /u > where users can build their own tools.

Just recently, there was a need for tools. When writing a blog, I often encountered the problem of < u > typesetting < /u >. Generally, spaces need to be added between Chinese and English, such as:

```
Compared with the same quarter in 2022, Apple's revenue from iPhone increased in the first three months of 2023.
```

Need to be formatted as:
```
Compared with the same quarter in 2022, Apple's revenue from iPhone increased in the first three months of 2023.
```

For this text conversion scenario, He3 provides a very convenient TextTransform component, and we only need to give < u > a conversion method to develop a tool < /u >:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8q3mut8y3djo2n81y4q.png)




! [](https://he3.app/blogs/copywriting-correct/695117e24f9b40d17abcc3281218c5f5363d1b401573fafd3f9a3223cf270e3e.png)


> TextTransform' component development document: [https://docs.he3app.com/components/texttransform.html] (https://docs.he3app.com/components/texttransform.html).


We first go to the web provided by He3 ([https://portal.he3app.com/home/createtool]), log in and fill in our tool name, ID, description, keywords and other information on the "Create Tool" page, and then press < u >.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h5y7q38a6mlv7876vkc.png)




Open the project and execute npm install to install the dependency:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxe9vyk0wif2etnlzj9w.png)




The structure of the project is very simple, mainly' package.json' plus' index.vue' file, and our tool code is written in the' index.vue' file (here I use the writing method of Vue3, and I use a "[copying-correct]" (https://www.npmjs.com/package/blogs/.


```html
<template>
<h-text-transform :sampleData="sampleData" :transform="transform" />
</template>

<script setup lang="ts">
import CopyWritingCorrectService from 'copywriting-correct';


Const sampleData = `He3 is the ultimate developer toolbox containing nearly 400 tools, covering the daily needs of front-end and back-end developers. He3' s intelligent search and clipboard intelligent recommendation will raise your development efficiency to a new level. `

const service = new CopyWritingCorrectService();

const transform = (inputValue: string): string => {
return service.correct(inputValue);
};
</script>
```

Then execute' npm run dev', and in the He3 client (you need to install [client ](https://he3.app/zh/) and log in), you can see our tools:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqqxtxdbr1vmgxerdqzg.png)




After the development, we can publish our tools by executing' npm run publish' and get our tool link: [https://t.he3app.com/67cj] (https://t.he3app.com/67cj).



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cx8ef2z8p73ip5whbym.png)





Later, we can check the review process of our tools on the He3 web side:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/977yvo378hp6i3gjoaf3.png)




It can be seen that the overall development experience is quite simple. You only need to have a node environment locally and install the He3 client, so you can build your own tools. At the same time, He3 provides highly encapsulated components for transformation scenarios, and < u > a small tool can be realized with a few lines of code < /u >. Finally, you are also welcome to experience the Chinese and English copywriting typesetting corrector: [https://t.he3app.com/67cj] (https://t.he3app.com/67cj).