-
I built a text annotation tool recently, first in React before rewriting it in Svelte. I found React's virtual DOM annoying, esp. when dealing with text selections + wrapping those selections with elements, etc. Svelte was just simpler in this regard (and overall, IMO).
But if you're not a frontend dev and want to use lots of off-the-shelf components, Svelte's ecosystem is much smaller than React's, so you won't have access to full-featured component libraries like Material UI, Chakra, etc. Additionally, Typescript support is stronger in React (it's mostly there in Svelte, but lacking in some areas [1]).
For both React and Svelte I found XState helpful to manage annotator state. It might not be necessary if your app isn't terribly complex (in particular, Svelte's built-in stores can handle complex state well), but I've found it a good way to think about state+events and more confidently make changes as a result.
1 - https://github.com/sveltejs/svelte/issues/4701
-
CodeRabbit
CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
-
I love Mithril (https://mithril.js.org), even in 2022. I wrote a blog about how/why I used it for Homechart:
https://homechart.app/blog/tech-stack-ui/
-
-
vitesse-modular-naiveui
If you are really into the "Vitesse" starter template created by Anthony Fu (Vue core team member) but want to use the clean architectural pattern instead of monolithic architecture, then you can clone this repo and use your own project. Have fun 🙂!
+1. I also recommend this template[1] based on Vitesse, a starter project created by one member of Vue core team. It includes the NaiveUI library with many advanced components ready.
[1] https://github.com/arijs/vitesse-modular-naiveui
-
lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
-
> "building a text-annotation based app"
I'm going to assume that you are talking about a desktop-based webapp that is also responsive, and not a native app. I also believe you when you say that you do not know where you are getting into.
I have 10+ years of experience doing front-end, with probably over a dozen React packages self-published in npm, and also tried making a rich text editor ~6 years back[1]. I actually recommend starting with no framework at all (please read on).
Creating a rich text editor might be the hardest thing you can do in "normal" front-end (excluding some more advanced "frontend" fields like 3D or games). You can either manipulate raw cursors, which will be very tricky because I'm not even sure you have access to all the right APIs (specially on mobile), or you can attempt to use Contenteditable, which is a hell of its own[2].
"All problems start with caret placing and multi browser support" [3]
That said, I believe 90% of the complexity of your app will be here, around the actual interaction with the or <div contenteditable> that you will be using. For that, no framework will really help you, at all. So my recommendation is to first get that working, which will take weeks/months and hundreds or thousands of lines of code, and then worry about placing the little hovering boxes in their place (the "UI"), which is like 10 lines of JS/CSS[4].<p>[1] <a href="https://github.com/franciscop/modern-editor" rel="nofollow">https://github.com/franciscop/modern-editor</a><p>[2] <a href="https://answerly.io/blog/my-pain-developing-a-wysiwyg-editor-with-contenteditable/" rel="nofollow">https://answerly.io/blog/my-pain-developing-a-wysiwyg-editor...</a><p>[3] <a href="https://news.ycombinator.com/item?id=27938702" rel="nofollow">https://news.ycombinator.com/item?id=27938702</a><p>[4] <a href="https://stackoverflow.com/q/4495626/938236" rel="nofollow">https://stackoverflow.com/q/4495626/938236</a>
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
-
-
As in every post about front-end frameworks, I must mention HTMX and Unpoly:
https://htmx.org/
https://unpoly.com/
To learn more about the concept, please take a look at Essays here:
-
stencil
A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
Maybe have a look at Stencil (+ Ionic). https://stenciljs.com/
Pro:
- Simple to learn
- Doesn't change all the time
- First-class TypeScript support
- Good default UI via Ionic
- Compiles to Web Components (although to be honest, this doesn't really matter)
- Easy testing
- Ionic as a company invests in Ionic the framework + Stencil the compiler. Might be around in 10 years, altough things could change. But this is true for all frameworks.
- You basically get an iOS/Android app for free, if you just dump the output in Capacitor (also developed by Ionic the company).
Cons:
- Stencil is not very widespread as a frontend framework.
-