Need example for a complete web app

[corysimmons]

You can find the examples of basic usage in Loro examples in Deno

Seems like there are tests here but no example usage.

I'd love to see a really basic Next.js implementation.

[zxch3n]

It uses tests as the basic examples. Personally, I found tests to be very descriptive.

You can find more examples in our repos and here.

The examples are not enough and are not yet close to real-world usage. What kinda of example are you looking for? We'd like to implement a few more demos.

[corysimmons]

What kinda of example are you looking for? We'd like to implement a few more demos.

Just the most barebones working implementation of something like a text doc using Next.js with their App Router.

Next.js Getting Started

// next.config.js
module.exports = {
  webpack: function (config) {
    config.experiments = {
      layers: true,
      asyncWebAssembly: true,
    };
    return config;
  },
};

// loro-dev/examples/nextjs/app/page.tsx
import { useState, useEffect } from 'react'
import { Loro, LoroText } from 'loro-crdt'

export default function Page() {
  const [textDoc, setTextDoc] = useState()

  useEffect(() => {
    const doc = new Loro()
    const text: LoroText = doc.getText("text")
    setTextDoc(text)
  }, [])

  function handleClick() {
    textDoc.insert(0, "Hello world!")
  }

  return (
    <div>
      <button onClick={() => handleClick()}>Click me</button>
      <pre>{JSON.stringify(textDoc, null, 2)}</pre>
    </div>
  )
}

Other example ideas that slowly iterate on the getting started one:

• Serving your doc locally
• Hosting your doc somewhere in the cloud (Vercel Server Blob)
• Making a server to enable multiplayer

But always keeping these as simple as possible (no fancy styling or huge chunks of code that are "best practices" yet).

And then CodeSandbox/StackBlitz and a gif of each demo working on their READMEs.

The idea is the majority of devs use Next.js (App Router) + TypeScript nowadays, and people just want to copy/paste some really terse code and then start tweaking it to learn how it works.

I tried to get Loro working because the features look cool, but I couldn't so I eventually gave up and went to y-sweet and it worked perfectly the first try. :(

[zxch3n]

Thank you for your feedback. Your input is highly appreciated. We'll add some examples like that next month.