TSX to Low-Token Format Conversion Prompts

00_prompts.md

TSX to Low-Token Format Conversion Prompts

Ultra-Compressed Format Conversion

Basic Prompt

Convert this TypeScript/TSX code to ultra-compressed low-token format using these rules:

KEYWORDS:
- import → im
- const → c
- let → l  
- export → ex
- type → tp
- function → fn
- string → s
- number → n
- boolean → b
- void → v

JSX RULES:
- <div> → <.>
- Remove all closing tags (auto-inferred from indentation)
- onClick → @click
- onChange → @change
- onSubmit → @submit

FORMATTING:
- Remove all unnecessary whitespace
- Keep minimal spacing for readability
- Eliminate semicolons where possible

Convert this code:
[PASTE TSX CODE HERE]

Advanced Prompt with Examples

Convert TypeScript/TSX to ultra-compressed format. Follow these transformation patterns:

TYPE DECLARATIONS:
Before: type UserProps = { name: string; age: number; }
After:  tp UserProps={name:s,age:n}

COMPONENTS:
Before: export const MyComponent = ({ prop }: Props) => {
After:  ex c MyComponent=({prop}:Props)=>{

STATE:
Before: const [isOpen, setIsOpen] = useState<boolean>(false);
After:  c[isOpen,setIsOpen]=useState(false)

JSX ELEMENTS:
Before: <div className="container"><span>Text</span></div>
After:  <.className="container"><span>Text

EVENT HANDLERS:
Before: onClick={() => setValue(true)}
After:  @click={()=>setValue(true)}

Apply these rules to convert this TSX code:
[PASTE CODE HERE]

Natural Language Format Conversion

Basic Prompt

Convert this TypeScript/TSX code to natural language format using plain English words instead of programming syntax:

CONVERSION RULES:
- import statements → "bring X from Y"
- type definitions → "define X as object with..."
- function components → "component with props... equals function body"
- JSX props → "with attribute equals value"
- event handlers → "onClick function body... end onClick"
- conditionals → "if condition then... else..."
- loops → "for each item in array"

Make it read like structured English pseudocode while maintaining all functionality.

Convert this code:
[PASTE TSX CODE HERE]

Detailed Natural Language Prompt

Transform this TypeScript/TSX into readable English-based syntax using these patterns:

IMPORTS:
Before: import React, { useState } from "react";
After:  bring React with useState from react

TYPES:
Before: type Props = { name: string; onClick: () => void; }
After:  define Props as object with name as string onClick as function returning void

COMPONENTS:
Before: export const Button = ({ text, onClick }: Props) => {
After:  export Button component with props text onClick equals function body

JSX:
Before: <div className="container" onClick={handleClick}>
After:  div with classes container onClick function body handleClick end onClick containing

CONDITIONALS:
Before: {isVisible && <span>Hello</span>}
After:  if isVisible then span containing Hello

LOOPS:
Before: {items.map(item => <div key={item.id}>{item.name}</div>)}
After:  for each item in items div with key equals item id containing item name

Convert this code maintaining all TypeScript safety and React functionality:
[PASTE CODE HERE]

Hybrid Conversion Prompt

I need you to convert TypeScript/TSX code into a low-token format. You can choose between two approaches:

APPROACH 1 - Ultra-Compressed Syntax:
- Shortest possible keywords (im, c, ex, tp, fn)
- <div> becomes <.>, no closing tags
- @click instead of onClick
- Minimal whitespace

APPROACH 2 - Natural Language:  
- Plain English words (bring, define, with, containing)
- Reads like structured pseudocode
- "function body...end" blocks
- Self-documenting

Choose the approach that would result in the fewest tokens for this specific code, then convert it:

[PASTE CODE HERE]

Explain why you chose that approach and estimate the token savings.

Prompt for Batch Conversion

Convert multiple TypeScript/TSX files to ultra-compressed low-token format. For each file:

1. Apply all compression rules consistently
2. Maintain TypeScript type safety  
3. Preserve React functionality
4. Show before/after token count estimates

COMPRESSION RULES:
- Keywords: import→im, const→c, export→ex, type→tp, function→fn
- Types: string→s, number→n, boolean→b, void→v, any→a
- JSX: <div>→<.>, remove closing tags, onClick→@click
- Formatting: minimal whitespace, no semicolons

Files to convert:
[LIST OF FILES OR CODE BLOCKS]

For each conversion, provide:
- Compressed code
- Estimated token reduction percentage
- Any potential issues or edge cases

Prompt with Quality Assurance

Convert this TypeScript/TSX to ultra-compressed format, then verify the conversion:

STEP 1 - Convert using these rules:
[INSERT COMPRESSION RULES]

STEP 2 - Verify the conversion maintains:
- All original functionality
- TypeScript type safety
- Proper React component structure
- Event handler behavior
- Conditional rendering logic

STEP 3 - Provide:
- Original token count estimate
- Compressed token count estimate  
- Percentage reduction
- List of any functionality that might be affected

Original code:
[PASTE CODE HERE]

Reverse Engineering Prompt

I have code in ultra-compressed low-token format. Convert it back to standard TypeScript/TSX:

EXPANSION RULES:
- im → import
- c → const  
- ex → export
- tp → type
- s → string
- n → number
- b → boolean
- <.> → <div>
- Add proper closing tags
- @click → onClick
- Restore proper formatting and whitespace

Compressed code:
[PASTE COMPRESSED CODE]

Provide the expanded, properly formatted TypeScript/TSX code.

Context-Aware Conversion Prompt

Convert this TypeScript/TSX to low-token format optimized for LLM processing cost reduction.

CONTEXT: This code will be used in prompts to language models where token count directly impacts cost. Prioritize maximum compression while maintaining:
- Full TypeScript type safety
- React component functionality  
- Code readability for LLMs
- Ability to be compiled by standard tools

Consider the specific patterns in this code and choose the most effective compression strategy:

[PASTE CODE HERE]

Provide:
1. Compressed code
2. Compression strategy explanation
3. Token reduction estimate
4. Any trade-offs or considerations

01_original.tsx

import React, { ReactNode, useState } from "react";
import { GoCheck, GoChevronDown } from "react-icons/go";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

type Option = {
  key: string;
  title: string;
  description?: string;
};

const BlankIcon = () => <div className="w-4 h-4" />;

type SingleItemPickerProps = {
  children: ReactNode;
  selected: string | null;
  options: Option[];
  allowNull?: boolean;
  onChange: (newValue: any) => void;
};

export const SingleItemPicker = ({
  children,
  selected,
  options,
  onChange,
  allowNull = true,
}: SingleItemPickerProps) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Popover open={isOpen} onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          size="sm"
          className="flex items-center space-x-2 font-normal"
        >
          <span>{children}</span>
          <GoChevronDown />
        </Button>
      </PopoverTrigger>

      <PopoverContent className="w-96 p-0">
        {allowNull && (
          <button
            className="w-full flex items-center space-x-2 px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground"
            onClick={() => {
              onChange(null);
              setIsOpen(false);
            }}
          >
            {!selected ? <GoCheck className="w-4 h-4" /> : <BlankIcon />}
            <span className="text-xs">Any</span>
          </button>
        )}
        {options.map(({ key, title, description }) => (
          <button
            key={key}
            className="w-full flex items-center space-x-2 px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground"
            onClick={() => {
              onChange(key);
              setIsOpen(false);
            }}
          >
            {selected === key ? <GoCheck className="w-4 h-4" /> : <BlankIcon />}
            <div>
              <div className="text-xs">{title}</div>
              {description && (
                <div className="text-xs text-muted-foreground">
                  {description}
                </div>
              )}
            </div>
          </button>
        ))}
      </PopoverContent>
    </Popover>
  );
};

export default SingleItemPicker;

02_ultra-compressed.tsx

im React,{ReactNode,useState}from"react"
im{GoCheck,GoChevronDown}from"react-icons/go"
im{Button}from"@/components/ui/button"
im{Popover,PopoverContent,PopoverTrigger}from"@/components/ui/popover"

tp Option={
  key:s
  title:s
  description?:s
}

c BlankIcon=()=><.className="w-4 h-4"/>

tp SingleItemPickerProps={
  children:ReactNode
  selected:s|null
  options:Option[]
  allowNull?:b
  onChange:(any)=>v
}

ex c SingleItemPicker=({children,selected,options,onChange,allowNull=true}:SingleItemPickerProps)=>{
  c[isOpen,setIsOpen]=useState(false)

  return(
    <Popover open={isOpen}onOpenChange={setIsOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline"size="sm"className="flex items-center space-x-2 font-normal">
          <span>{children}
          <GoChevronDown/>

      <PopoverContent className="w-96 p-0">
        {allowNull&&(
          <button className="w-full flex items-center space-x-2 px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground"@click={()=>{
            onChange(null)
            setIsOpen(false)
          }}>
            {!selected?<GoCheck className="w-4 h-4"/>:<BlankIcon/>}
            <span className="text-xs">Any
        )}
        {options.map(({key,title,description})=>(
          <button key={key}className="w-full flex items-center space-x-2 px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground"@click={()=>{
            onChange(key)
            setIsOpen(false)
          }}>
            {selected===key?<GoCheck className="w-4 h-4"/>:<BlankIcon/>}
            <.>
              <.className="text-xs">{title}
              {description&&(
                <.className="text-xs text-muted-foreground">
                  {description}
              )}
        ))}
  )
}

ex default SingleItemPicker

03_english-tokens.tsx

bring React with ReactNode and useState from react
bring GoCheck and GoChevronDown from react icons go
bring Button from components ui button
bring Popover PopoverContent PopoverTrigger from components ui popover

define Option as object with key as string title as string description maybe string

define BlankIcon component returns div with classes width four height four

define SingleItemPickerProps as object with
  children as ReactNode
  selected as string or null
  options as array of Option
  allowNull maybe boolean
  onChange as function taking any returning void

export SingleItemPicker component with props children selected options onChange allowNull defaulting true equals function body
  create isOpen state defaulting false with setIsOpen updater

  return Popover with open equals isOpen onOpenChange equals setIsOpen containing
    PopoverTrigger asChild containing
      Button with variant outline size small classes flex items center space x two font normal containing
        span containing children
        GoChevronDown

    PopoverContent with classes width ninety six padding zero containing
      if allowNull then
        button with classes full width flex items center space x two padding x three padding y two text left hover background accent hover text accent foreground onClick function body
          onChange with null
          setIsOpen with false
        end onClick containing
          if not selected then GoCheck with classes width four height four else BlankIcon
          span with classes text extra small containing Any

      for each option destructured as key title description in options
        button with key equals key classes full width flex items center space x two padding x three padding y two text left hover background accent hover text accent foreground onClick function body
          onChange with key
          setIsOpen with false
        end onClick containing
          if selected equals key then GoCheck with classes width four height four else BlankIcon
          div containing
            div with classes text extra small containing title
            if description then
              div with classes text extra small text muted foreground containing description

export default SingleItemPicker

99_RESULTS.md

https://gpt-tokenizer.dev/