/* Setting up the font-family and font-weight for headings and body text */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Graphik:wght@400;600&display=swap");

:root {
  --purple-1: #5551FF;
  --purple-2: #4A46DA;
  --black: #000;
  --gray-1: #333;
}

body {
  font-family: "Graphik", sans-serif;
  font-weight: 400; /* Regular weight for body text */
}

body.bold {
  font-weight: 600; /* Bold weight for body text */
}

h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 600 !important; /* Semi-bold weight for H1 */
}

h2,
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 500; /* Medium weight for H2 and H3 */
}

img[src$="quickstart"] {
  border: 1px solid #e4e7ed;
}

img[src$="no-code"] {
  border: 1px solid #e4e7ed;
}

img[src$="auth"] {
  min-width: 25%; 
  width: 35%; 
  margin: auto
}

img[src$="auth-table"] {
  min-width: 25px; 
  width: 25px; 
}

img[src$="framework"] {
  border: 1px solid #e4e7ed;
}

.imageBorder {
  border: 1px solid #e4e7ed;
}


/* API Reference Dark Mode styling */
.flex-none.min-w-full.text-sm.overflow-x-auto {
  background-color: #171b1a; /* Adjusted to full opacity for demonstration */
}

.no-bullet li {
  list-style-type: none;
  font-size: small;
}

.large-icon {
  width: 60px;
  height: 100%;
}

.bg-primary\/10 {
  background-color: #bfcbff;
}

.text-primary{
  color: black;
}

/* styles.css */
.dark .prompts {
  color: #828282;       
  font-family: 'Roboto Mono', monospace;
}

.prompts {
  color: black;       
  font-family: 'Roboto Mono', monospace;
}

.papers {       
  font-family: 'Roboto Mono', monospace;
  font-size: small;
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}


th, td {
  padding: 10px 10px 10px 10px ;
  text-align: left;
}

.expandedImageContainer {
	padding: 16px;
	border-radius: 16px;
  background: #E9EEF1;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.expandedImageContainerInner {
  display: flex;
  align-items: flex-start;
	max-width: 300px;
  max-height: 210px;
}

.expandedImageContainer img {
  max-height: 210px;
}

/* this abomination here is the only way left
to customize a card component */
.card {
  > div {
    > div {
      width: unset;
      height: unset;
    }
  }
}

.components__table {
  table-layout: fixed;
  width: 300px;
}

.button-wrapper {
  margin-top: 30px;
}

.button {
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  position: relative;
  outline: none;

  transition: background-color 0.1s ease-in;
}

.primary-button {
  background-color: var(--purple-1);
  border-radius: 40px;
  color: white;
  display: inline-flex;
  align-items: center;

  &:hover {
    background-color: var(--purple-2);
  }
}

.secondary-button {
  background-color: var(--black);
  border-radius: 30px;
  color: white;

  &:hover {
    background-color: var(--gray-1);
  }
}

.button--arrow {
  padding-right: 40px;
  &::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><path id="Vector" d="M9.47019 6.56246H0.375V5.4375H9.47019L5.19808 1.16537L5.99998 0.375L11.625 5.99998L5.99998 11.625L5.19808 10.8346L9.47019 6.56246Z" fill="white"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.link {
  border: none;

  &:not(:last-child) {
    margin-right: 8px;
  }
}

.componentFields td, .componentFields th {
  padding: 8px;
  border: 1px solid rgb(var(--gray-200));
}

.componentFields .desc {
  width: 50ch;
}

:is(.dark .componentFields td, .dark .componentFields th) {
  border: 1px solid rgb(var(--gray-800));
}

#topbar-cta-button .bg-primary-dark, #topbar-cta-button .text-white, #topbar-cta-button svg {
  background-color: var(--purple-1);
  border-radius: 40px;
  color: white;
  font-weight: 600
}



// This script is adding curl exaples to openapi.json file
// Usage: node curl.js <input_file> <output_file>

const fs = require('fs');

const input_file = process.argv[2];
const output_file = process.argv[3];

let json;
try {
	const data = fs.readFileSync(input_file, 'utf8');
	json = JSON.parse(data);
} catch (err) {
	console.log('Could not read input file');
	console.error(err);
	process.exit(1);
}


const paths = json.paths;

function buildExample(schema) {
	const example = {};
	for (const key of schema.required) {
		const prop = schema.properties[key];
		if (prop?.type === 'object') {
			example[key] = buildExample(prop);
		} else if (prop.type === 'array') {
			example[key] = [buildExample(prop.items)];
		} else if (prop.example) {
			example[key] = prop.example;
		} else {
			switch (prop.type) {
				case 'string':
					example[key] = 'string';
					break;
				case 'integer':
					example[key] = 0;
					break;
				case 'number':
					example[key] = 0.0;
					break;
				case 'boolean':
					example[key] = false;
					break;
				default:
					example[key] = null;
			}
		}
	}
	return example;
}

for (const path in paths) {
	const methods = paths[path];

	for (const method in methods) {
		const auth = methods[method].security;
		const bearer = auth?.[0]?.bearerAuth
		const methodObj = methods[method];
		const newMethodObj = { ...methodObj };
		const body = methodObj.requestBody;
		const bodyContent = body?.content;
		const bodyJson = bodyContent?.['application/json'];
		let bodySchema = bodyJson?.schema;
		let bodyData = {};
		if(bodySchema?.['$ref']) {
			const key = bodySchema.$ref.split('/').slice(-1)[0];
			bodySchema = json.components.schemas[key];
			if (bodySchema?.example) {
				bodyData = bodySchema.example;
			} else {
				bodyData = buildExample(bodySchema);
			}
		}
		const curl = []
		curl.push(`curl --location --request ${method.toUpperCase()} ${json.servers[0].url}${path}`);
		if (bearer) {
			curl.push(` --header "Authorization: Bearer <token>"`);
		}
		if (bodyJson) {
			curl.push(` --header "Content-Type: application/json"`);
			curl.push(`--data-raw '${JSON.stringify(bodyData)}'`);
		}

		if (!methods[method]['x-codeSamples']) {
			methods[method]['x-codeSamples'] = [];
		}
		
		methods[method]['x-codeSamples'].unshift({
			lang: 'cURL',
			source: curl.join(' \\\n')
		});
	}
}

process.stdout.write(JSON.stringify(json, null, 2));


// This script is adding curl exaples to openapi.json file
// Usage: node curl.js <input_file> <output_file>

const fs = require('fs');

const input_file = process.argv[2];
const output_file = process.argv[3];

let json;
try {
	const data = fs.readFileSync(input_file, 'utf8');
	json = JSON.parse(data);
} catch (err) {
	console.log('Could not read input file');
	console.error(err);
	process.exit(1);
}


const paths = json.paths;

function buildExample(schema) {
	const example = {};
	for (const key of (schema.required || [])) {
		const prop = schema.properties[key];
		if (prop?.type === 'object') {
			example[key] = buildExample(prop);
		} else if (prop.type === 'array') {
			example[key] = [buildExample(prop.items)];
		} else if (prop.example) {
			example[key] = prop.example;
		} else {
			switch (prop.type) {
				case 'string':
					example[key] = 'string';
					break;
				case 'integer':
					example[key] = 0;
					break;
				case 'number':
					example[key] = 0.0;
					break;
				case 'boolean':
					example[key] = false;
					break;
				default:
					example[key] = null;
			}
		}
	}
	return example;
}

for (const path in paths) {
	const methods = paths[path];

	for (const method in methods) {
		const auth = methods[method].security;
		const bearer = auth?.[0]?.bearerAuth
		const methodObj = methods[method];
		const newMethodObj = { ...methodObj };
		const body = methodObj.requestBody;
		const bodyContent = body?.content;
		const bodyJson = bodyContent?.['application/json'];
		let bodySchema = bodyJson?.schema;
		let bodyData = {};
		if(bodySchema?.['$ref']) {
			const key = bodySchema.$ref.split('/').slice(-1)[0];
			bodySchema = json.components.schemas[key];
			if (bodySchema?.example) {
				bodyData = bodySchema.example;
			} else {
				bodyData = buildExample(bodySchema);
			}
		}
		const curl = []
		curl.push(`curl --location --request ${method.toUpperCase()} ${json.servers[0].url}${path}`);
		if (bearer) {
			curl.push(` --header "Authorization: Bearer <token>"`);
		}
		if (bodyJson) {
			curl.push(` --header "Content-Type: application/json"`);
			curl.push(`--data-raw '${JSON.stringify(bodyData)}'`);
		}

		if (!methods[method]['x-codeSamples']) {
			methods[method]['x-codeSamples'] = [];
		}
		
		methods[method]['x-codeSamples'].unshift({
			lang: 'cURL',
			source: curl.join(' \\\n')
		});
	}
}

process.stdout.write(JSON.stringify(json, null, 2));


Fields

Low code usage

Reference

Writer AI Studio

Home

No-code

Framework

Legacy API Reference

Components

Sign in

Sidebar

Introduction

Development options

Models

Pricing

Prompting strategies

Language support

Account management

Prompt security

Transparency

Mitigating bias

Research papers

Quickstart

SDKs

Text generation

Chat completion

Applications

Knowledge graph

Error handling

Rate limits

Graph file upload tool

List models

Generate content from an existing application with inputs.

Create graph

List graphs

Retrieve graph

Update graph

Delete graph

Add file to graph

Remove file from graph

Upload file

Retrieve file

List files

Download file

Delete file

Legacy API reference

Get your organization subscription details

Detect If the content is AI generated

Delete snippets

Find snippets

Update snippets

List your styleguide pages

Page details

Add terms

Delete terms

Find terms

Update terms

List users

Choosing an app type

Building a chat app

Building a text generation app

Use cases

Deploying an app

Editing an app

Column

Column Container

Header

Horizontal Stack

Section

Separator

Step

Step Container

Tab Container

Avatar

Chatbot

DataFrame

Heading

Icon

Image

Link

Message

Metric

Plotly Graph

Text

Vega Lite Chart

Video Player

Checkbox Input

Date Input

Dropdown Input

File Input

Multiselect Input

Number Input

Radio Input

Rating Input

Select Input

Slider Input

Switch Input

Textarea Input

Text Input

Button

HTML Element

Pagination

Repeater

Reuse Component

Timer

Webcam Capture

Google Maps

Mapbox

IFrame

Writer AI module

Application state

Backend-initiated actions

Builder basics

Event handlers

Handling inputs

Social post generator

Chat assistant

Product description generator

Release notes generator

Deploy to Writer Cloud

Deploy with Docker

Testing

Authentication

Backend-driven UI

Custom components

Custom server

Frontend scripts

Page routes

Sessions

State schema

Stylesheets

Name	Type	Description	Options
Start collapsed	Text		Yes No
Background	Color
Accent	Color
Primary text	Color
Secondary text	Color
Container background	Color
Container shadow	Shadow
Separator	Color
Button	Color
Button text	Color
Button shadow	Shadow
Custom CSS classes	Text	CSS classes, separated by spaces. You can define classes in custom stylesheets.

Layout

Content

Input

Other

Embed

Sidebar

Fields

Low code usage

Reference

Layout

Content

Input

Other

Embed

​Fields

​Low code usage

​Reference

Fields

Low code usage

Reference