Getting started3 / 4

The card

The card is what Hodi shows of your plugin. You draw it with Hodi's components: it looks like the app straight away.

What you do

Open web/index.tsx: it's the part of your plugin that shows in Hodi.
2On the highlighted line, add look="primary" to the button so it stands out.
3Look at the preview: the Say hello button takes the main style.

1{2  "id": "hello-world",3  "name": "Hello world",4  "version": "0.1.0",5  "api": 2,6  "settings": [7    {8      "key": "greeting",9      "type": "text",10      "default": "Hi"11    }12  ]13}

1import type { ServerPlugin } from '@hodi-app/plugin-sdk/server'23const plugin: ServerPlugin = {4  routes: {5    'POST /hello': async (_request, ctx) => {6      const { greeting } = ctx.settings()7      return { body: { text: `${greeting}!` } }8    }9  }10}1112export default plugin

1import { useState } from 'react'2import {3  Button, SettingRow, definePlugin, usePluginApi4} from 'hodi:sdk'56const HelloCard = () => {7  const api = usePluginApi()8  const [text, setText] = useState('Say hello')9  const sayHello = async () => {10    const response = await api('/hello', { method: 'POST' })11    setText((await response.json()).text)12  }13  return (14    <SettingRow label={text} hint="Your route's answer">15      <Button onClick={sayHello}>16        Say hello17      </Button>18    </SettingRow>19  )20}2122definePlugin({ settingsPage: HelloCard })

PreviewLive

Hello world

Your first plugin.

GreetingHi

Hi!Your route's answer