buttonize

---

Buttonize enables you to build internals tools with AWS CDK.

Hook-up UI components directly to AWS Lambda functions. Just install Buttonize and deploy your CDK. That's it.

Getting started

Sign-up at buttonize.io

Setup fresh new CDK project

npm

$ npx create-buttonize
$ cd my-buttonize-app && npm install
$ npx buttonize dev --profile=YOUR_AWS_PROFILE

pnpm

$ pnpm create buttonize
$ cd my-buttonize-app && pnpm install
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE

Install to existing CDK project

npm

$ npm install -D buttonize
$ npx buttonize dev --profile=YOUR_AWS_PROFILE

pnpm

$ pnpm add -D buttonize
$ pnpm buttonize dev --profile=YOUR_AWS_PROFILE

Example

// MyStack.ts

import * as path from 'path'
import { Stack, StackProps } from 'aws-cdk-lib'
import { NodejsFunction } from 'aws-cdk-lib/aws-lambda-nodejs'
import { Action, Buttonize, ButtonizeApp, Display, Input } from 'buttonize/cdk'
import { Construct } from 'constructs'

export class MyStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props)

    Buttonize.init(this, {
      apiKey: 'btnz_mybuttonizekey1234567',
      externalId: 'this-is-super-secret-99'
    })

    const discountGenerator = new NodejsFunction(this, 'DiscountGenerator', {
      entry: path.join(__dirname, 'discountGenerator.ts')
    })

    new ButtonizeApp(this, 'DemoApp', {
      name: 'Discount code generator',
      description:
        'Select the discount amount and you will get the discount code on the next page.'
    })
      .page('InputPage', {
        body: [
          Display.heading('Generate discount code for customer'),
          Input.select({
            id: 'discount',
            label: 'Discount value',
            options: [
              { label: '30%', value: 30 },
              { label: '60%', value: 60 }
            ]
          }),
          Display.button({
            label: 'Generate discount',
            onClick: Action.aws.lambda.invoke(
              discountGenerator,
              { Payload: { discountValue: '{{discount}}' } },
              { id: 'discountGenerator' }
            ),
            onClickFinished: Action.buttonize.app.changePage('DonePage')
          })
        ]
      })
      .page('DonePage', {
        body: [
          Display.heading('Discount generated'),
          Display.text('Discount code: {{InputPage.discountGenerator.code}}')
        ]
      })
  }
}

// discountGenerator.ts

export const handler = async (event: { discountValue: number }) => {
  console.log(`Generating discount of value ${event.discountValue}`)

  return {
    discountValue: event.discountValue,
    code: `${Math.random()}`.split('.')[1]
  }
}

Result

---

Buttonize Docs

Learn more at docs.buttonize.io

---

Join our community Discord | Twitter