Card Editor — HashDo

card.ts — Card Editor

// HashDo Card Definition
// Edit this code and click "Run Card" to test

const card = {
  name: 'do-hello',
  description: 'A friendly greeting card',

  inputs: {
    name: {
      type: 'string',
      required: true,
      description: 'Name to greet',
    },
    color: {
      type: 'string',
      required: false,
      default: '#667eea',
      description: 'Background color',
    },
  },

  async getData({ inputs, state }) {
    const visits = ((state.visits) || 0) + 1;
    return {
      viewModel: {
        greeting: 'Hello, ' + inputs.name + '!',
        color: inputs.color || '#667eea',
        visits: visits,
      },
      state: { visits },
      textOutput: 'Hello, ' + inputs.name + '! (Visit #' + visits + ')',
    };
  },

  template: (vm) =>
    '<div style="padding:24px;font-family:system-ui;background:' + vm.color + ';border-radius:12px;color:white;">' +
    '<h2 style="margin:0 0 8px">' + vm.greeting + '</h2>' +
    '<p style="margin:0;opacity:0.85;font-size:14px">Visit #' + vm.visits + '</p>' +
    '</div>',
};

// Export for the test harness
card;

Test Inputs

name

color

Output

Click "Run Card" to see the rendered output

Ready. Write a card definition and click Run Card to test.