How to use codesandbox - 9 common examples

'package.json': {
        content: {
          "name": data.name,
          "description": "TODO: put description of each code example here",
          "dependencies": {
            "@rei/cdr-assets": "^0.3.0",
            "vue": "2.5.16",
            ...dependencies
          }
        },
      },
    },
  };

  console.log(data, parameters);
  return `https://codesandbox.io/api/v1/sandboxes/define?parameters=${getParameters(parameters)}`;
}

export function makeExample (source) {
  return getParameters({
    files: {
      "src/Demo.vue": {
        content: source
      },
      "src/App.vue": {
        content: `<template>
  
</template>

function generateExampleSandboxLink (exampleTemplateName, exampleCode) {
  const templatePath = `${process.cwd()}/docs/codesandbox/${exampleTemplateName}`
  const parameters = getParameters({
    files: {
      'package.json': {
        content: fs.readFileSync(`${templatePath}/package.json`, { encoding: 'utf-8' })
      },
      'src/app.spec.js': {
        content: exampleCode
      },
      'src/app.js': {
        content: fs.readFileSync(`${templatePath}/src/app.js`, { encoding: 'utf-8' })
      },
      'src/index.js': {
        content: fs.readFileSync(`${templatePath}/src/index.js`, { encoding: 'utf-8' })
      },
      'index.html': {
        content: fs.readFileSync(`${templatePath}/index.html`, { encoding: 'utf-8' })
      }

vue: 'latest',
            'vue-router': 'latest'
          }
        }
      },
      ...files.reduce(
        (fileMap, file) => ({
          ...fileMap,
          ...file
        }),
        {}
      )
    }
  }

  return getParameters(data)
}

(async function load(): Promise {
      const files = await getSandbox();
      if (!cancelled) {
        setParameters(getParameters({ files }));
      }
    })();

const js = (code) => {
  const parameters = getParameters({
    files: {
      "index.js": {
        content: code,
        isBinary: false
      },
      'index.html': {
        content: templates.indexHtml,
        isBinary: false,
      },
      "package.json": {
        isBinary: false,
        content: JSON.stringify({ dependencies: {
        }})
      }
    }
  });

parameters() {
      return getParameters(this.rawParameters)
    },
    rawParameters() {

(async function load(): Promise {
      const files = await getSandbox();
      if (!cancelled) {
        setParameters(getParameters({ files }));
      }
    })();

result.splice(-1)
      }

      result.push('```')
    }

    const [isSanbdboxMatch, sandboxLink] = line.match(/\[codesandbox\]\((.*)\)/) || []

    if (isSanbdboxMatch) {
      const sandboxProjectPath = path.join(
        process.cwd(),
        sandboxLink
      )
      const files = getProjectFiles(sandboxProjectPath)
      debug('Generating link for files', files)
      const parameters = getParameters({files})

      const url = `https://codesandbox.io/api/v1/sandboxes/define?${iframe ? 'embed=1&' : ''}parameters=${parameters}`
      const link = iframe
        ? ``
        : `<a rel="noopener noreferrer" href="${url}">Run this example</a>`

      result.push(link)
    }

    if (!isSanbdboxMatch &amp;&amp; !isSnippetMatch) {
      result.push(line)
    }

    return result
  }, [])