Hello World Example

The simplest SynApp Mini App. Learn the basics of SynApp SDK with an interactive counter.

Interactive Playground

Try editing the code below and see changes instantly. Click "Open in CodeSandbox" to fork and save your own version.

What You'll Learn

• SynAppProvider - Root context provider
• SynAppPage - Page wrapper component
• SynAppButton - Themed button component
• useSession - Access user authentication

Code Breakdown

1. Import SDK Components

import { 
  SynAppProvider, 
  SynAppPage, 
  SynAppButton,
  useSession 
} from '@synapp/ui';

2. Create Your Component

function HelloWorld() {
  const { session, isAuthenticated } = useSession();
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Welcome to SynApp! 👋</h1>
      {isAuthenticated && <p>Logged in as {session.user.email}</p>}
      
      <div className="text-7xl">{count}</div>
      
      <SynAppButton onClick={() => setCount(c => c + 1)}>
        Increment
      </SynAppButton>
    </div>
  );
}

3. Wrap with Providers

function App() {
  return (
    <SynAppProvider>
      <SynAppPage requireAuth={false} title="Hello World">
        <HelloWorld />
      </SynAppPage>
    </SynAppProvider>
  );
}

Try These Challenges

1. Add a Decrement Button - Create a button that decreases the count
2. Persist Count - Save count to localStorage
3. Add Animations - Animate the counter with CSS transitions
4. Use Theme Colors - Import useTheme() and apply theme colors
5. Add Haptic Feedback - Use useHapticFeedback() on button click

Next Steps