Description
Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast โก๏ธ
WatermelonDB alternatives and similar libraries
Based on the "Storage" category.
Alternatively, view WatermelonDB alternatives based on common mentions on social networks and blogs.
-
localForage
๐พ Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. -
jquery-cookie
DISCONTINUED. A simple, lightweight jQuery plugin for reading, writing and deleting cookies. -
Lovefield
DISCONTINUED. Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use. -
cookies.js
๐ซ Tastier cookies, local, session, and db storage in a tiny package. Includes subscribe() events for changes. -
Hadmean
Generate powerful admin apps without writing a single line of code - Run `npx dashpress` to see some magic! -
proxy-web-storage
stokado can proxy objects of any storage-like, providing getter/setter syntax sugars, serialization, subscription listening, expiration setting, one-time value retrieval.
CodeRabbit: AI Code Reviews for Developers

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of WatermelonDB or a related project?
README
A reactive database framework
Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast โก๏ธ
WatermelonDB | |
---|---|
โก๏ธ | Launch your app instantly no matter how much data you have |
๐ | Highly scalable from hundreds to tens of thousands of records |
๐ | Lazy loaded. Only load data when you need it |
๐ | Offline-first. Sync with your own backend |
๐ฑ | Multiplatform. iOS, Android, web, and Node.js |
โ๏ธ | Optimized for React. Easily plug data into components |
๐งฐ | Framework-agnostic. Use JS API to plug into other UI frameworks |
โฑ | Fast. And getting faster with every release! |
โ | Proven. Powers Nozbe Teams since 2017 (and many others) |
โจ | Reactive. (Optional) RxJS API |
๐ | Relational. Built on rock-solid SQLite foundation |
โ ๏ธ | Static typing with Flow or TypeScript |
Why Watermelon?
WatermelonDB is a new way of dealing with user data in React Native and React web apps.
It's optimized for building complex applications in React Native, and the number one goal is real-world performance. In simple words, your app must launch fast.
For simple apps, using Redux or MobX with a persistence adapter is the easiest way to go. But when you start scaling to thousands or tens of thousands of database records, your app will now be slow to launch (especially on slower Android devices). Loading a full database into JavaScript is expensive!
Watermelon fixes it by being lazy. Nothing is loaded until it's requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve in an instant.
But unlike using SQLite directly, Watermelon is fully observable. So whenever you change a record, all UI that depends on it will automatically re-render. For example, completing a task in a to-do app will re-render the task component, the list (to reorder), and all relevant task counters. Learn more.
๐บ Next-generation React databases(a talk about WatermelonDB) | โจ Check out web Demo |
Usage
Quick (over-simplified) example: an app with posts and comments.
First, you define Models:
class Post extends Model {
@field('name') name
@field('body') body
@children('comments') comments
}
class Comment extends Model {
@field('body') body
@field('author') author
}
Then, you connect components to the data:
const Comment = ({ comment }) => (
<View style={styles.commentBox}>
<Text>{comment.body} โ by {comment.author}</Text>
</View>
)
// This is how you make your app reactive! โจ
const enhance = withObservables(['comment'], ({ comment }) => ({
comment,
}))
const EnhancedComment = enhance(Comment)
And now you can render the whole Post:
const Post = ({ post, comments }) => (
<View>
<Text>{post.name}</Text>
<Text>Comments:</Text>
{comments.map(comment =>
<EnhancedComment key={comment.id} comment={comment} />
)}
</View>
)
const enhance = withObservables(['post'], ({ post }) => ({
post,
comments: post.comments
}))
The result is fully reactive! Whenever a post or comment is added, changed, or removed, the right components will automatically re-render on screen. Doesn't matter if a change occurred in a totally different part of the app, it all just works out of the box!
โก๏ธ Learn more: see full documentation
Who uses WatermelonDB
Does your company or app use ๐? Open a pull request and add your logo/icon with link here!
Contributing
WatermelonDB is an open-source project and it needs your help to thrive!
If there's a missing feature, a bug, or other improvement you'd like, we encourage you to contribute! Feel free to open an issue to get some guidance and see [Contributing guide](./CONTRIBUTING.md) for details about project setup, testing, etc.
If you're just getting started, see good first issues that are easy to contribute to. If you make a non-trivial contribution, email me, and I'll send you a nice ๐ sticker!
If you make or are considering making an app using WatermelonDB, please let us know!
Author and license
WatermelonDB was created by @Nozbe.
WatermelonDB's main author and maintainer is Radek Pietruszewski (website โ twitter โ engineering posters)
WatermelonDB is available under the MIT license. See the [LICENSE file](./LICENSE) for more info.
*Note that all licence references and agreements mentioned in the WatermelonDB README section above
are relevant to that project's source code only.