Poor setup experience

[dominictobias]

Hi,

Thanks for this lib I'm trying it out. I just wanted to give my setup experience as I think it could be a lot smoother:

• npm/bun/pnpm create email does nothing except create a folder with emails/BatmanEmail.tsx inside. No tsconfig.json or package.json so it does nothing by itself and I have to look at your source code to see what these should be. Why don't you include them?
• The BatmanEmail.tsx seems out of date, I had to create a new template with email create for it not to produce a large error
• Minor: the selected nav item is invisible against the background:
  

Also in the intro it says that it can be used for building responsive templates but then if I look at Column which would be a prime building block for responsive templates, there's nothing about stacking on mobile, and indeed it's a table and doesn't stack 🤔

I haven't started experimenting but I think this stuff could be improved as a first impression :)

[shellscape]

npm/bun/pnpm create email

The docs on this state pretty clearly that it only creates a new template. If you want to create a new project, use npm create jsx-email. We have docs on that too here: https://jsx.email/docs/quick-start

The BatmanEmail.tsx seems out of date, I had to create a new template with email create for it not to produce a large error

Sounds like maybe you have out of date deps. Without providing the error, there's nothing I can act on here.

Minor: the selected nav item is invisible against the background:

Which browser and version? I'm unable to reproduce here.

there's nothing about stacking on mobile, and indeed it's a table and doesn't stack

I wouldn't expect that this framework provide detailed instructions for how to build responsive emails. I'm not aware of an email framework which assumes users come in with zero knowledge on how to construct HTML or the ins and outs of responsive layouts. Indeed, the lib is used to make responsive emails and we've got quite a few users doing just that and @lordelogos is our resident responsive expert. Would be open to suggestions and/or PRs for improving the docs in a way you'd think would be beneficial.

[dominictobias]

bun/pnpm create is the same as npm. Here are the results with npm:

% npm create jsx-email
Need to install the following packages:
[email protected]
Ok to proceed? (y) y


> npx
> create-jsx-email


create-jsx-email v2.0.5

The fastest way to get started with JSX Email

✔ Project name: … email-project
✔ TypeScript or JavaScript: › TypeScript

Creating Project at: email-project/templates
Creating a new template at: email-project/templates/email.tsx

✓ jsx-email Project Created

Next, run:

  $ cd email-project
  $ yarn
  $ yarn dev

Check out the docs! http://jsx.email/docs/quick-start

Now I add a package.json and tsconfig.json:

{
  "name": "email-project",
  "scripts": {
    "dev": "email preview ./templates",
    "build": "email build ./templates/email.tsx"
  },
  "devDependencies": {
    "@types/react": "^18.3.12",
    "react": "^18.3.1",
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "jsx-email": "^2.1.4"
  }
}

{
  "compilerOptions": {
    // Enable latest features
    "lib": ["ESNext", "DOM"],
    "target": "ESNext",
    "module": "ESNext",
    "moduleDetection": "force",
    "jsx": "react-jsx",
    "allowJs": true,

    // Bundler mode
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,

    // Best practices
    "strict": true,
    "skipLibCheck": true,
    "noFallthroughCasesInSwitch": true,

    // Some stricter flags (disabled by default)
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noPropertyAccessFromIndexSignature": false
  }
}

Actually my mistake here - building email.tsx (npm run build) does work, I must have had the wrong path before

[shellscape]

OK thanks. There should be supporting files there. We'll look into it, see if there was a regression.