# Code generation settings

CodeParrot is a developer first platform. You can control the generated code. Open the settings panel by clicking on settings ⚙️ icon on CodeParrot panel.

Edit Settings
Edit Settings

It will open the settings panel

Settings Panel
Settings Panel

You can choose your frameworks, languages, styling preferences.

# Frameworks

  • React
  • Html
  • Vue
  • Svelte
  • Flutter
  • React Native

# Languages

  • TypeScript
  • JavaScript
  • Dart


  • Tailwind css
  • Inline css
  • External css
  • Scss
  • Styled Components
  • Styled Objects

To get a new language / framework / language added, please write to royal@codeparrot.ai

# Rules For CodeParrot

You can specify additional rules for CodeParrot like "use material ui library", "create functional components instead of class", "use jest for writing tests" etc.

You can specify as many rules as you like. Think what would you instruct your fellow developer

Rules For CodeParrot
Rules For CodeParrot

# Sample Rules

Use functional components instead of Class Components in React

Use material UI as component library

use jest for writing tests

This is my tailwind config tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = { 
    content: ['./src/**/*.{js,jsx,ts,tsx}',],
    theme: {
        colors: {
        'dark-green': '#071C14',
        'off-white': '#F6F3EE',
        'white': '#FFFFFF',
        'light-yellow': '#FCF6EE',
        'light-grey': '#E6E7E9',
        'light-red': '#F9EEEC',
        'yellow': '#DEAA57',
        'dark-red': '#642B1F',
        'golden': '#6F552C',
        'neutral-black': '#4A4947'

        fontFamily: {
        'neue-montreal': ['PP Neue Montreal', 'sans-serif'] // Use the proper font name

        extend: {},
    plugins: [],